<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../bootstrap.js"></script>

<link rel="stylesheet" href="../../css/bootstrap.css" />
<link rel="stylesheet" href="../../css/shortcodes.css" />
<link rel="stylesheet" href="../../../../../assets/css/typography.css" />

<style type="text/css">
input[type="radio"] { margin: 3px 0 0 }
#demo_code .item, #demo_code .group { margin: 1%; width: 100%; float: left; border:1px solid #eee }
#demo_code .item > div,
#demo_code .group > div { padding: 10px;float:left; min-height: 60px; min-width: 45% }
</style>
<script type="text/javascript">

(function($){
	$(document).ready(function () {
		//reseting
		$('#button-type option[value=none]').attr({selected:'selected'});
		$('#buttons-group').val(''); $('#buttons-dropdown').val('');
		
		$('#button-size input:radio[value=Normal]').attr('checked','checked');
		$('#button-color input:radio[value=Default]').attr('checked','checked');
		$('#button-icon-div select option:first').attr('selected','selected');
		$('#button-text input:text').attr('value','Button');
		$('#button-link input:text').attr('value','#');
		$('#button-demo').html('<i></i>Button');				
		$('#button-demo').attr('href','#');
		
		// group
		$('#num-buttons').submit(function(e){ 
			e.preventDefault(); 
			$('#demo_button').empty(); $('#demo_code').empty(); 
			append_group($('#buttons-group').val()); 
		});
		$('#buttons-group').bind('keyup change',function(){
			$('#demo_button').empty(); $('#demo_code').empty(); 
			append_group($(this).val());
		});
		
		// dropdown
		$('#num-links').submit(function(e){
			e.preventDefault();	
			$('#demo_button').empty(); $('#demo_code').empty(); 
			append_dropdown($('#button-dropdown').val()); 
		});
		
		$('#button-dropdown').bind('keyup change',function(){ 
			$('#demo_button').empty(); $('#demo_code').empty(); 
			append_dropdown($(this).val()); 
		});
		
		// dropdown split
		$('#num-links-split').submit(function(e){
			e.preventDefault();	
			$('#demo_button').empty(); $('#demo_code').empty(); 
			append_dropdown_split($('#button-dropdown-split').val()); 
		});
		
		$('#button-dropdown-split').bind('keyup change',function(){ 
			$('#demo_button').empty(); $('#demo_code').empty(); 
			append_dropdown_split($(this).val()); 
		});		
		
		
		$('#button-group').bind('change',function(){
			var group = $(this).find('option:selected').val();
			if (group == 'none') {
				$('#demo_button').empty(); $('#demo_code').empty();
				$('#buttons-group').val(''); $('#button-dropdown').val(''); $('#button-dropdown-split').val('');
				
				//reset
				$('#button-size input:radio[value=Normal]').attr('checked','checked');
				$('#button-color input:radio[value=Default]').attr('checked','checked');
				$('#button-icon-div select option:first').attr('selected','selected');
				$('#button-text input:text').attr('value','Button');
				$('#button-link input:text').attr('value','#');
				$('#button-demo').text('Button');				
				$('#button-demo').attr('href','#');				
				
				//insert new
				$('#demo_button').append('<a id="button-demo" class="btn" href="#" target="_blank"><i> </i>Button</a>');
				
				$('#button-size').css({display: 'block'});
				$('#button-text').css({display: 'block'});
				$('#button-icon-div').css({display: 'block'});
				$('#button-color').css({display: 'block'});
				$('#button-link').css({display: 'block'});
				$('#num-buttons').css({display: 'none'});
				$('#num-links').css({display: 'none'});
				$('#num-links-split').css({display: 'none'});
			} else if (group == 'btn-group') {
				$('#buttons-group').val(''); $('#button-dropdown').val(''); $('#button-dropdown-split').val('');
				$('#demo_button').empty(); $('#demo_code').empty();
				$('#button-size').css({display: 'none'});
				$('#button-text').css({display: 'none'});
				$('#button-icon-div').css({display: 'none'});
				$('#button-color').css({display: 'none'});
				$('#button-link').css({display: 'none'});			
			
				$('#num-buttons').css({display: 'block'});
				$('#num-links').css({display: 'none'});				
				$('#num-links-split').css({display: 'none'});				
			} else if (group == 'dropdown-toggle') {
				$('#demo_button').empty(); $('#demo_code').empty();
				$('#buttons-group').val(''); $('#button-dropdown').val(''); $('#button-dropdown-split').val('');
				$('#button-size').css({display: 'none'});
				$('#button-text').css({display: 'none'});
				$('#button-icon-div').css({display: 'none'});
				$('#button-color').css({display: 'none'});
				$('#button-link').css({display: 'none'});	
			
				$('#num-buttons').css({display: 'none'});
				$('#num-links').css({display: 'block'});
				$('#num-links-split').css({display: 'none'});
			} else if (group == 'dropdown-toggle-split') {
				$('#buttons-group').val(''); $('#button-dropdown').val(''); $('#button-dropdown-split').val('');
				$('#demo_button').empty(); $('#demo_code').empty();
				$('#button-size').css({display: 'none'});
				$('#button-text').css({display: 'none'});
				$('#button-icon-div').css({display: 'none'});
				$('#button-color').css({display: 'none'});
				$('#button-link').css({display: 'none'});	
			
				$('#num-buttons').css({display: 'none'});
				$('#num-links').css({display: 'none'});
				$('#num-links-split').css({display: 'block'});
			} else if ($('#button-group option:selected').val() == 'btn-toolbar') {
				$('#buttons-group').val(''); $('#button-dropdown').val(''); $('#button-dropdown-split').val('');
				$('#demo_button').empty(); $('#demo_code').empty();
				$('#button-size').css({display: 'none'});
				$('#button-text').css({display: 'none'});
				$('#button-icon-div').css({display: 'none'});
				$('#button-color').css({display: 'none'});
				$('#button-link').css({display: 'none'});	
			
				$('#num-buttons').css({display: 'none'});
				$('#num-links').css({display: 'none'});
				$('#num-links-split').css({display: 'none'});

				$('#demo_button').append('<div class="btn-toolbar"><div class="btn-group"><a href="#btn-1" class="btn btn-normal btn-default" data-original-title=""> Prev </a><a href="#btn-2" class="btn btn-normal btn-default" data-original-title="">  Play </a><a href="#btn-3" class="btn btn-normal btn-default" data-original-title="">  Next </a></div><div class="btn-group"><a href="#btn-1" class="btn btn-normal btn-default" data-original-title=""><i class="icon-backward"></i>   </a><a href="#btn-2" class="btn btn-normal btn-success" data-original-title=""><i class="icon-pause"></i>   </a><a href="#btn-3" class="btn btn-normal btn-default" data-original-title=""><i class="icon-forward"></i>   </a></div></div>');
			}
			
		});
		
		// preview for normal button
		$('#button-body #button-icon').change(function(){
			var icon = $('#button-body').find('select[id=button-icon] option:selected').text();
			var text = $('#button-body').find('input:text[name=text]').val();
			$('#button-demo').html('<i class="'+icon+'"></i> '+text);
		});
		$('#button-body input[name=text]').bind('keyup change', function(){
			var icon = $('#button-body').find('select[id=button-icon] option:selected').text();
			var text = $('#button-body').find('input:text[name=text]').val();
			$('#button-demo').html('<i class="'+icon+'"></i> '+text);
		});
		$('#button-body input:radio[name=size]').live('click', function(){
			var size = $('#button-body').find('input:radio[name=size]:checked').val();
			var type = $('#button-body').find('input:radio[name=type]:checked').val();
			$('#button-demo').removeClass().addClass('btn btn-'+type.toLowerCase()+' btn-'+size.toLowerCase());
		});
		$('#button-body input:radio[name=type]').live('click', function(){
			var size = $('#button-body').find('input:radio[name=size]:checked').val();
			var type = $('#button-body').find('input:radio[name=type]:checked').val();
			$('#button-demo').removeClass().addClass('btn btn-'+type.toLowerCase()+' btn-'+size.toLowerCase());
		});
		$('#button-body input[name=link]').bind('keyup change', function(){
			var link = $('#button-body').find('input:text[name=link]').val();
			$('#button-demo').attr('href',link);
		});
		
		//group
		function append_group(cols){
			if(isNaN(cols)||cols>99) return;
			$('#demo_button').empty();
			var num = cols;
			var item = '';
			var itemedit = '';
			var btnedit = '';
				
			for(i=0;i<num;i++) {
				item += '<a id="button-'+(i+1)+'" class="btn" href="#btn-'+(i+1)+'"><i></i>Button'+(i+1)+'</a>';
				itemedit += '<form id="button-'+i+'" class="item" style="max-width: 47%; ">\
						<div>\
							<strong>Button '+(i+1)+' Text</strong><br> <input class="text" id="button-text-'+i+'" type="text" value="Button '+(i+1)+' Text" /><br>\
						</div>\
						<div>\
							<strong>Button '+(i+1)+' Icon</strong><br>\
							<select id="button-icon-'+i+'"> \
								<option selected="selected">none</option> <option><i class="icon-adjust"></i> icon-adjust</option> <option><i class="icon-asterisk"></i> icon-asterisk</option> <option><i class="icon-ban-circle"></i> icon-ban-circle</option> <option><i class="icon-bar-chart"></i> icon-bar-chart</option> <option><i class="icon-barcode"></i> icon-barcode</option> <option><i class="icon-beaker"></i> icon-beaker</option> <option><i class="icon-beer"></i> icon-beer</option> <option><i class="icon-bell"></i> icon-bell</option> <option><i class="icon-bell-alt"></i> icon-bell-alt</option> <option><i class="icon-bolt"></i> icon-bolt</option> <option><i class="icon-book"></i> icon-book</option> <option><i class="icon-bookmark"></i> icon-bookmark</option> <option><i class="icon-bookmark-empty"></i> icon-bookmark-empty</option> <option><i class="icon-briefcase"></i> icon-briefcase</option> <option><i class="icon-bullhorn"></i> icon-bullhorn</option> <option><i class="icon-calendar"></i> icon-calendar</option> <option><i class="icon-camera"></i> icon-camera</option> <option><i class="icon-camera-retro"></i> icon-camera-retro</option> <option><i class="icon-certificate"></i> icon-certificate</option> <option><i class="icon-check"></i> icon-check</option> <option><i class="icon-check-empty"></i> icon-check-empty</option> <option><i class="icon-circle"></i> icon-circle</option> <option><i class="icon-circle-blank"></i> icon-circle-blank</option> <option><i class="icon-cloud"></i> icon-cloud</option> <option><i class="icon-cloud-download"></i> icon-cloud-download</option> <option><i class="icon-cloud-upload"></i> icon-cloud-upload</option> <option><i class="icon-coffee"></i> icon-coffee</option> <option><i class="icon-cog"></i> icon-cog</option> <option><i class="icon-cogs"></i> icon-cogs</option> <option><i class="icon-comment"></i> icon-comment</option> <option><i class="icon-comment-alt"></i> icon-comment-alt</option> <option><i class="icon-comments"></i> icon-comments</option> <option><i class="icon-comments-alt"></i> icon-comments-alt</option> <option><i class="icon-credit-card"></i> icon-credit-card</option> <option><i class="icon-dashboard"></i> icon-dashboard</option> <option><i class="icon-desktop"></i> icon-desktop</option> <option><i class="icon-download"></i> icon-download</option> <option><i class="icon-download-alt"></i> icon-download-alt</option>  <option><i class="icon-edit"></i> icon-edit</option> <option><i class="icon-envelope"></i> icon-envelope</option> <option><i class="icon-envelope-alt"></i> icon-envelope-alt</option> <option><i class="icon-exchange"></i> icon-exchange</option> <option><i class="icon-exclamation-sign"></i> icon-exclamation-sign</option> <option><i class="icon-external-link"></i> icon-external-link</option> <option><i class="icon-eye-close"></i> icon-eye-close</option> <option><i class="icon-eye-open"></i> icon-eye-open</option> <option><i class="icon-facetime-video"></i> icon-facetime-video</option> <option><i class="icon-fighter-jet"></i> icon-fighter-jet</option> <option><i class="icon-film"></i> icon-film</option> <option><i class="icon-filter"></i> icon-filter</option> <option><i class="icon-fire"></i> icon-fire</option> <option><i class="icon-flag"></i> icon-flag</option> <option><i class="icon-folder-close"></i> icon-folder-close</option> <option><i class="icon-folder-open"></i> icon-folder-open</option> <option><i class="icon-folder-close-alt"></i> icon-folder-close-alt</option> <option><i class="icon-folder-open-alt"></i> icon-folder-open-alt</option> <option><i class="icon-food"></i> icon-food</option> <option><i class="icon-gift"></i> icon-gift</option> <option><i class="icon-glass"></i> icon-glass</option> <option><i class="icon-globe"></i> icon-globe</option> <option><i class="icon-group"></i> icon-group</option> <option><i class="icon-hdd"></i> icon-hdd</option> <option><i class="icon-headphones"></i> icon-headphones</option> <option><i class="icon-heart"></i> icon-heart</option> <option><i class="icon-heart-empty"></i> icon-heart-empty</option> <option><i class="icon-home"></i> icon-home</option> <option><i class="icon-inbox"></i> icon-inbox</option> <option><i class="icon-info-sign"></i> icon-info-sign</option> <option><i class="icon-key"></i> icon-key</option> <option><i class="icon-leaf"></i> icon-leaf</option> <option><i class="icon-laptop"></i> icon-laptop</option> <option><i class="icon-legal"></i> icon-legal</option> <option><i class="icon-lemon"></i> icon-lemon</option> <option><i class="icon-lightbulb"></i> icon-lightbulb</option> <option><i class="icon-lock"></i> icon-lock</option> <option><i class="icon-unlock"></i> icon-unlock</option>  <option><i class="icon-magic"></i> icon-magic</option> <option><i class="icon-magnet"></i> icon-magnet</option> <option><i class="icon-map-marker"></i> icon-map-marker</option> <option><i class="icon-minus"></i> icon-minus</option> <option><i class="icon-minus-sign"></i> icon-minus-sign</option> <option><i class="icon-mobile-phone"></i> icon-mobile-phone</option> <option><i class="icon-money"></i> icon-money</option> <option><i class="icon-move"></i> icon-move</option> <option><i class="icon-music"></i> icon-music</option> <option><i class="icon-off"></i> icon-off</option> <option><i class="icon-ok"></i> icon-ok</option> <option><i class="icon-ok-circle"></i> icon-ok-circle</option> <option><i class="icon-ok-sign"></i> icon-ok-sign</option> <option><i class="icon-pencil"></i> icon-pencil</option> <option><i class="icon-picture"></i> icon-picture</option> <option><i class="icon-plane"></i> icon-plane</option> <option><i class="icon-plus"></i> icon-plus</option> <option><i class="icon-plus-sign"></i> icon-plus-sign</option> <option><i class="icon-print"></i> icon-print</option> <option><i class="icon-pushpin"></i> icon-pushpin</option> <option><i class="icon-qrcode"></i> icon-qrcode</option> <option><i class="icon-question-sign"></i> icon-question-sign</option> <option><i class="icon-quote-left"></i> icon-quote-left</option> <option><i class="icon-quote-right"></i> icon-quote-right</option> <option><i class="icon-random"></i> icon-random</option> <option><i class="icon-refresh icon-spin"></i> icon-refresh icon-spin</option> <option><i class="icon-remove"></i> icon-remove</option> <option><i class="icon-remove-circle"></i> icon-remove-circle</option> <option><i class="icon-remove-sign"></i> icon-remove-sign</option> <option><i class="icon-reorder"></i> icon-reorder</option> <option><i class="icon-reply"></i> icon-reply</option> <option><i class="icon-resize-horizontal"></i> icon-resize-horizontal</option> <option><i class="icon-resize-vertical"></i> icon-resize-vertical</option> <option><i class="icon-retweet"></i> icon-retweet</option> <option><i class="icon-road"></i> icon-road</option> <option><i class="icon-rss"></i> icon-rss</option> <option><i class="icon-screenshot"></i> icon-screenshot</option> <option><i class="icon-search"></i> icon-search</option>  <option><i class="icon-share"></i> icon-share</option> <option><i class="icon-share-alt"></i> icon-share-alt</option> <option><i class="icon-shopping-cart"></i> icon-shopping-cart</option> <option><i class="icon-signal"></i> icon-signal</option> <option><i class="icon-signin"></i> icon-signin</option> <option><i class="icon-signout"></i> icon-signout</option> <option><i class="icon-sitemap"></i> icon-sitemap</option> <option><i class="icon-sort"></i> icon-sort</option> <option><i class="icon-sort-down"></i> icon-sort-down</option> <option><i class="icon-sort-up"></i> icon-sort-up</option> <option><i class="icon-spinner icon-spin"></i> icon-spinner icon-spin</option> <option><i class="icon-star"></i> icon-star</option> <option><i class="icon-star-empty"></i> icon-star-empty</option> <option><i class="icon-star-half"></i> icon-star-half</option> <option><i class="icon-tablet"></i> icon-tablet</option> <option><i class="icon-tag"></i> icon-tag</option> <option><i class="icon-tags"></i> icon-tags</option> <option><i class="icon-tasks"></i> icon-tasks</option> <option><i class="icon-thumbs-down"></i> icon-thumbs-down</option> <option><i class="icon-thumbs-up"></i> icon-thumbs-up</option> <option><i class="icon-time"></i> icon-time</option> <option><i class="icon-tint"></i> icon-tint</option> <option><i class="icon-trash"></i> icon-trash</option> <option><i class="icon-trophy"></i> icon-trophy</option> <option><i class="icon-truck"></i> icon-truck</option> <option><i class="icon-umbrella"></i> icon-umbrella</option> <option><i class="icon-upload"></i> icon-upload</option> <option><i class="icon-upload-alt"></i> icon-upload-alt</option> <option><i class="icon-user"></i> icon-user</option> <option><i class="icon-user-md"></i> icon-user-md</option> <option><i class="icon-volume-off"></i> icon-volume-off</option> <option><i class="icon-volume-down"></i> icon-volume-down</option> <option><i class="icon-volume-up"></i> icon-volume-up</option> <option><i class="icon-warning-sign"></i> icon-warning-sign</option> <option><i class="icon-wrench"></i> icon-wrench</option> <option><i class="icon-zoom-in"></i> icon-zoom-in</option> <option><i class="icon-zoom-out"></i> icon-zoom-out</option>  <option><i class="icon-file"></i> icon-file</option> <option><i class="icon-file-alt"></i> icon-file-alt</option> <option><i class="icon-cut"></i> icon-cut</option> <option><i class="icon-copy"></i> icon-copy</option> <option><i class="icon-paste"></i> icon-paste</option> <option><i class="icon-save"></i> icon-save</option> <option><i class="icon-undo"></i> icon-undo</option> <option><i class="icon-repeat"></i> icon-repeat</option>  <option><i class="icon-text-height"></i> icon-text-height</option> <option><i class="icon-text-width"></i> icon-text-width</option> <option><i class="icon-align-left"></i> icon-align-left</option> <option><i class="icon-align-center"></i> icon-align-center</option> <option><i class="icon-align-right"></i> icon-align-right</option> <option><i class="icon-align-justify"></i> icon-align-justify</option> <option><i class="icon-indent-left"></i> icon-indent-left</option> <option><i class="icon-indent-right"></i> icon-indent-right</option>  <option><i class="icon-font"></i> icon-font</option> <option><i class="icon-bold"></i> icon-bold</option> <option><i class="icon-italic"></i> icon-italic</option> <option><i class="icon-strikethrough"></i> icon-strikethrough</option> <option><i class="icon-underline"></i> icon-underline</option> <option><i class="icon-link"></i> icon-link</option> <option><i class="icon-paper-clip"></i> icon-paper-clip</option> <option><i class="icon-columns"></i> icon-columns</option>  <option><i class="icon-table"></i> icon-table</option> <option><i class="icon-th-large"></i> icon-th-large</option> <option><i class="icon-th"></i> icon-th</option> <option><i class="icon-th-list"></i> icon-th-list</option> <option><i class="icon-list"></i> icon-list</option> <option><i class="icon-list-ol"></i> icon-list-ol</option> <option><i class="icon-list-ul"></i> icon-list-ul</option> <option><i class="icon-list-alt"></i> icon-list-alt</option>  <option><i class="icon-angle-left"></i> icon-angle-left</option> <option><i class="icon-angle-right"></i> icon-angle-right</option> <option><i class="icon-angle-up"></i> icon-angle-up</option> <option><i class="icon-angle-down"></i> icon-angle-down</option> <option><i class="icon-arrow-down"></i> icon-arrow-down</option> <option><i class="icon-arrow-left"></i> icon-arrow-left</option> <option><i class="icon-arrow-right"></i> icon-arrow-right</option> <option><i class="icon-arrow-up"></i> icon-arrow-up</option>  <option><i class="icon-caret-down"></i> icon-caret-down</option> <option><i class="icon-caret-left"></i> icon-caret-left</option> <option><i class="icon-caret-right"></i> icon-caret-right</option> <option><i class="icon-caret-up"></i> icon-caret-up</option> <option><i class="icon-chevron-down"></i> icon-chevron-down</option> <option><i class="icon-chevron-left"></i> icon-chevron-left</option> <option><i class="icon-chevron-right"></i> icon-chevron-right</option> <option><i class="icon-chevron-up"></i> icon-chevron-up</option>  <option><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</option> <option><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</option> <option><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</option> <option><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</option> <option><i class="icon-double-angle-left"></i> icon-double-angle-left</option> <option><i class="icon-double-angle-right"></i> icon-double-angle-right</option> <option><i class="icon-double-angle-up"></i> icon-double-angle-up</option> <option><i class="icon-double-angle-down"></i> icon-double-angle-down</option>  <option><i class="icon-hand-down"></i> icon-hand-down</option> <option><i class="icon-hand-left"></i> icon-hand-left</option> <option><i class="icon-hand-right"></i> icon-hand-right</option> <option><i class="icon-hand-up"></i> icon-hand-up</option> <option><i class="icon-circle"></i> icon-circle</option> <option><i class="icon-circle-blank"></i> icon-circle-blank</option>  <option><i class="icon-play-circle"></i> icon-play-circle</option> <option><i class="icon-play"></i> icon-play</option> <option><i class="icon-pause"></i> icon-pause</option> <option><i class="icon-stop"></i> icon-stop</option>  <option><i class="icon-step-backward"></i> icon-step-backward</option> <option><i class="icon-fast-backward"></i> icon-fast-backward</option> <option><i class="icon-backward"></i> icon-backward</option> <option><i class="icon-forward"></i> icon-forward</option>  <option><i class="icon-fast-forward"></i> icon-fast-forward</option> <option><i class="icon-step-forward"></i> icon-step-forward</option> <option><i class="icon-eject"></i> icon-eject</option>  <option><i class="icon-fullscreen"></i> icon-fullscreen</option> <option><i class="icon-resize-full"></i> icon-resize-full</option> <option><i class="icon-resize-small"></i> icon-resize-small</option>  <option><i class="icon-ambulance"></i> icon-ambulance</option> <option><i class="icon-beaker"></i> icon-beaker</option> <option><i class="icon-h-sign"></i> icon-h-sign</option> <option><i class="icon-hospital"></i> icon-hospital</option>  <option><i class="icon-medkit"></i> icon-medkit</option> <option><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</option>  <option><i class="icon-stethoscope"></i> icon-stethoscope</option> <option><i class="icon-user-md"></i> icon-user-md</option> <option><i class="social-icon-apple"></i> social-icon-apple</option> <option><i class="social-icon-mac"></i> social-icon-mac</option> <option><i class="social-icon-android"></i> social-icon-android</option> <option><i class="social-icon-windows"></i> social-icon-windows</option> <option><i class="social-icon-soundcloud"></i> social-icon-soundcloud</option> <option><i class="social-icon-soundcloud-rectangle"></i> social-icon-soundcloud-rectangle</option> <option><i class="social-icon-dribbble"></i> social-icon-dribbble</option> <option><i class="social-icon-dribbble-round"></i> social-icon-dribbble-round</option> <option><i class="social-icon-dribbble-rectangle"></i> social-icon-dribbble-rectangle</option> <option><i class="social-icon-foptionckr"></i> social-icon-foptionckr</option> <option><i class="social-icon-foptionckr-round"></i> social-icon-foptionckr-round</option> <option><i class="social-icon-foptionckr-rectangle"></i> social-icon-foptionckr-rectangle</option> <option><i class="social-icon-html5-full"></i> social-icon-html5-full</option> <option><i class="social-icon-html5"></i> social-icon-html5</option> <option><i class="social-icon-css3"></i> social-icon-css3</option> <option><i class="social-icon-chrome"></i> social-icon-chrome</option> <option><i class="social-icon-firefox"></i> social-icon-firefox</option> <option><i class="social-icon-ie"></i> social-icon-ie</option> <option><i class="social-icon-opera"></i> social-icon-opera</option>  <option><i class="social-icon-safari"></i> social-icon-safari</option> <option><i class="social-icon-facebook-rectangle"></i> social-icon-facebook-rectangle</option> <option><i class="social-icon-facebook"></i> social-icon-facebook</option> <option><i class="social-icon-facebook-round"></i> social-icon-facebook-round</option> <option><i class="social-icon-twitter"></i> social-icon-twitter</option> <option><i class="social-icon-twitter-rectangle"></i> social-icon-twitter-rectangle</option> <option><i class="social-icon-twitter-round"></i> social-icon-twitter-round</option> <option><i class="social-icon-rss"></i> social-icon-rss</option> <option><i class="social-icon-rss-rectangle"></i> social-icon-rss-rectangle</option> <option><i class="social-icon-rss-round"></i> social-icon-rss-round</option> <option><i class="social-icon-google"></i> social-icon-google</option> <option><i class="social-icon-googleplus"></i> social-icon-googleplus</option> <option><i class="social-icon-google-drive"></i> social-icon-google-drive</option> <option><i class="social-icon-googleplus-tabs"></i> social-icon-googleplus-tabs</option> <option><i class="social-icon-googleplus-rectangle"></i> social-icon-googleplus-rectangle</option> <option><i class="social-icon-googleplus-round"></i> social-icon-googleplus-round</option> <option><i class="social-icon-word"></i> social-icon-word</option> <option><i class="social-icon-excel"></i> social-icon-excel</option> <option><i class="social-icon-pdf"></i> social-icon-pdf</option>  <option><i class="social-icon-joomla"></i> social-icon-joomla</option> <option><i class="social-icon-wordpress"></i> social-icon-wordpress</option> <option><i class="social-icon-wordpress-rectangle"></i> social-icon-wordpress-rectangle</option> <option><i class="social-icon-deoptioncious"></i> social-icon-deoptioncious</option> <option><i class="social-icon-deoptioncious-round"></i> social-icon-deoptioncious-round</option> <option><i class="social-icon-deoptioncious-rectangle"></i> social-icon-deoptioncious-rectangle</option> <option><i class="social-icon-picasa"></i> social-icon-picasa</option> <option><i class="social-icon-picasa-rectangle"></i> social-icon-picasa-rectangle</option> <option><i class="social-icon-pinterest"></i> social-icon-pinterest</option> <option><i class="social-icon-pinterest-round"></i> social-icon-pinterest-round</option> <option><i class="social-icon-pinterest-rectangle"></i> social-icon-pinterest-rectangle</option> <option><i class="social-icon-stumbleupon"></i> social-icon-stumbleupon</option> <option><i class="social-icon-stumbleupon-round"></i> social-icon-stumbleupon-round</option> <option><i class="social-icon-stumbleupon-rectangle"></i> social-icon-stumbleupon-rectangle</option> <option><i class="social-icon-linkedin"></i> social-icon-linkedin</option> <option><i class="social-icon-linkedin-round"></i> social-icon-linkedin-round</option> <option><i class="social-icon-linkedin-rectangle"></i> social-icon-linkedin-rectangle</option> <option><i class="social-icon-lastfm"></i> social-icon-lastfm</option> <option><i class="social-icon-lastfm-rectangle"></i> social-icon-lastfm-rectangle</option>  <option><i class="social-icon-forrst"></i> social-icon-forrst</option> <option><i class="social-icon-forrst-rectangle"></i> social-icon-forrst-rectangle</option> <option><i class="social-icon-deviantart"></i> social-icon-deviantart</option> <option><i class="social-icon-deviantart-round"></i> social-icon-deviantart-round</option> <option><i class="social-icon-deviantart-rectangle"></i> social-icon-deviantart-rectangle</option> <option><i class="social-icon-youtube-full"></i> social-icon-youtube-full</option> <option><i class="social-icon-youtube"></i> social-icon-youtube</option> <option><i class="social-icon-vimeo"></i> social-icon-vimeo</option> <option><i class="social-icon-vimeo-rectangle"></i> social-icon-vimeo-rectangle</option> <option><i class="social-icon-skype"></i> social-icon-skype</option> <option><i class="social-icon-xing-rectangle"></i> social-icon-xing-rectangle</option> <option><i class="social-icon-xing-round"></i> social-icon-xing-round</option> <option><i class="social-icon-paypal"></i> social-icon-paypal</option> <option><i class="social-icon-github"></i> social-icon-github</option> <option><i class="social-icon-github-mascot"></i> social-icon-github-mascot</option> <option><i class="social-icon-github-rectangle"></i> social-icon-github-rectangle</option> <option><i class="social-icon-github-kitty"></i> social-icon-github-kitty</option> <option><i class="social-icon-tumblr"></i> social-icon-tumblr</option> <option><i class="social-icon-tumblr-rectangle"></i> social-icon-tumblr-rectangle</option> <option><i class="social-icon-yahoo"></i> social-icon-yahoo</option> <option><i class="social-icon-yahoo-rectangle"></i> social-icon-yahoo-rectangle</option> \
							</select> \
							<br> \
						</div>\
						<div>\
							<strong>Button '+(i+1)+' URL</strong><br> <input class="url" id="button-url-'+i+'" type="text" name="link'+(i+1)+'" value="#" onclick="this.select()" /> <br>\
						</div>\
					</form>';
				btnedit = '<div class="group" style=" max-width: 96.2%">\
						<div>\
							<strong>Button Size</strong><br> <input type="radio" name="size" value="Mini"> Mini <input type="radio" name="size" value="Small"> Small <input type="radio" name="size" value="Normal" checked="checked"> Normal <input type="radio" name="size" value="Large"> Large<br>\
						</div>\
						<div>\
							<strong>Button Color</strong><br> <input type="radio" name="type" value="Default" checked="checked"> Default <input type="radio" name="type" value="Primary"> Primary <input type="radio" name="type" value="Info"> Info <input type="radio" name="type" value="Success">\ Success<br> <input type="radio" name="type" value="Warning"> Warning <input type="radio" name="type" value="Danger"> Danger <input type="radio" name="type" value="Inverse"> Inverse <input type="radio" name="type" value="Link"> Link\
						</div>\
					</div>';
			}
			
			$('<div class="btn-group"> </div>').appendTo('#button-body #demo_button');
			$(btnedit).appendTo('#demo_code');
			$(itemedit).appendTo('#demo_code');
			$(item).appendTo('#demo_button .btn-group');
		};

		//group item preview
		$('#demo_code .item select').live('change',function() {
			var idx = $(this).attr('id').replace('button-icon-','');
			var icon = $(this).val();
			var text = $('#demo_code .item:eq('+idx+') > div > input.text').val();
			//$('#demo_button a:eq('+idx+') i').attr('class',icon);
			$('#demo_button .btn-group a:eq('+idx+')').html('<i class="'+icon+'"></i> '+text);
		});

		$('#demo_code .item > div > input.text').live('keyup change', function() {
			var idx = $(this).attr('id').replace('button-text-','');
			var icon = $(this).parents('.item').find('select').val();
			var text = $(this).val();
			$('#demo_button .btn-group a:eq('+idx+')').html('<i class="'+icon+'"></i> '+text);
		});
		
		$('#demo_code .item > div > input.url').live('keyup change', function() {
			var idx = $(this).attr('id').replace('button-url-','');
			var url = $(this).val();
			$('#demo_button .btn-group a:eq('+idx+')').attr('href',url);
		});	
		
		
		// group preview
		$('#button-body #demo_code .group input:radio[name=size]').live('click', function(){
			var size = $('#button-body #demo_code').find('.group input:radio[name=size]:checked').val();
			var type = $('#button-body #demo_code').find('.group input:radio[name=type]:checked').val();
			$('#button-body #demo_button .btn-group a').attr('class','').addClass('btn btn-'+type.toLowerCase()+' btn-'+size.toLowerCase());
		});
		$('#button-body #demo_code .group input:radio[name=type]').live('click', function(){
			var size = $('#button-body #demo_code').find('.group input:radio[name=size]:checked').val();
			var type = $('#button-body #demo_code').find('.group input:radio[name=type]:checked').val();
			$('#button-body #demo_button .btn-group a').removeClass().addClass('btn btn-'+type.toLowerCase()+' btn-'+size.toLowerCase());
		});
		
		
		function append_dropdown(cols){
			if(isNaN(cols)||cols>99) return;
			$('#demo_button').empty();
			var num = cols;
			var item = '';
			var itemedit = '';
			var btnedit = '';
				
			for(i=0;i<num;i++){
				item += '<li><a id="link-'+(i+1)+'" href="#btn-'+(i+1)+'"><i></i> Link'+(i+1)+'</a></li>';
				 
				itemedit += '<div class="item" style="max-width: 47%; ">\
						<div>\
							<strong>Link '+(i+1)+' Text</strong><br> <input class="text" type="text" id="link-text-'+i+'" value="Link '+(i+1)+' Text" /><br>\
						</div>\
						<div>\
							<strong>Link '+(i+1)+' Icon</strong><br> <select class="icon" id="link-icon-'+i+'"> <option selected="selected">none</option> <option><i class="icon-adjust"></i> icon-adjust</option> <option><i class="icon-asterisk"></i> icon-asterisk</option> <option><i class="icon-ban-circle"></i> icon-ban-circle</option> <option><i class="icon-bar-chart"></i> icon-bar-chart</option> <option><i class="icon-barcode"></i> icon-barcode</option> <option><i class="icon-beaker"></i> icon-beaker</option> <option><i class="icon-beer"></i> icon-beer</option> <option><i class="icon-bell"></i> icon-bell</option> <option><i class="icon-bell-alt"></i> icon-bell-alt</option> <option><i class="icon-bolt"></i> icon-bolt</option> <option><i class="icon-book"></i> icon-book</option> <option><i class="icon-bookmark"></i> icon-bookmark</option> <option><i class="icon-bookmark-empty"></i> icon-bookmark-empty</option> <option><i class="icon-briefcase"></i> icon-briefcase</option> <option><i class="icon-bullhorn"></i> icon-bullhorn</option> <option><i class="icon-calendar"></i> icon-calendar</option> <option><i class="icon-camera"></i> icon-camera</option> <option><i class="icon-camera-retro"></i> icon-camera-retro</option> <option><i class="icon-certificate"></i> icon-certificate</option> <option><i class="icon-check"></i> icon-check</option> <option><i class="icon-check-empty"></i> icon-check-empty</option> <option><i class="icon-circle"></i> icon-circle</option> <option><i class="icon-circle-blank"></i> icon-circle-blank</option> <option><i class="icon-cloud"></i> icon-cloud</option> <option><i class="icon-cloud-download"></i> icon-cloud-download</option> <option><i class="icon-cloud-upload"></i> icon-cloud-upload</option> <option><i class="icon-coffee"></i> icon-coffee</option> <option><i class="icon-cog"></i> icon-cog</option> <option><i class="icon-cogs"></i> icon-cogs</option> <option><i class="icon-comment"></i> icon-comment</option> <option><i class="icon-comment-alt"></i> icon-comment-alt</option> <option><i class="icon-comments"></i> icon-comments</option> <option><i class="icon-comments-alt"></i> icon-comments-alt</option> <option><i class="icon-credit-card"></i> icon-credit-card</option> <option><i class="icon-dashboard"></i> icon-dashboard</option> <option><i class="icon-desktop"></i> icon-desktop</option> <option><i class="icon-download"></i> icon-download</option> <option><i class="icon-download-alt"></i> icon-download-alt</option>  <option><i class="icon-edit"></i> icon-edit</option> <option><i class="icon-envelope"></i> icon-envelope</option> <option><i class="icon-envelope-alt"></i> icon-envelope-alt</option> <option><i class="icon-exchange"></i> icon-exchange</option> <option><i class="icon-exclamation-sign"></i> icon-exclamation-sign</option> <option><i class="icon-external-link"></i> icon-external-link</option> <option><i class="icon-eye-close"></i> icon-eye-close</option> <option><i class="icon-eye-open"></i> icon-eye-open</option> <option><i class="icon-facetime-video"></i> icon-facetime-video</option> <option><i class="icon-fighter-jet"></i> icon-fighter-jet</option> <option><i class="icon-film"></i> icon-film</option> <option><i class="icon-filter"></i> icon-filter</option> <option><i class="icon-fire"></i> icon-fire</option> <option><i class="icon-flag"></i> icon-flag</option> <option><i class="icon-folder-close"></i> icon-folder-close</option> <option><i class="icon-folder-open"></i> icon-folder-open</option> <option><i class="icon-folder-close-alt"></i> icon-folder-close-alt</option> <option><i class="icon-folder-open-alt"></i> icon-folder-open-alt</option> <option><i class="icon-food"></i> icon-food</option> <option><i class="icon-gift"></i> icon-gift</option> <option><i class="icon-glass"></i> icon-glass</option> <option><i class="icon-globe"></i> icon-globe</option> <option><i class="icon-group"></i> icon-group</option> <option><i class="icon-hdd"></i> icon-hdd</option> <option><i class="icon-headphones"></i> icon-headphones</option> <option><i class="icon-heart"></i> icon-heart</option> <option><i class="icon-heart-empty"></i> icon-heart-empty</option> <option><i class="icon-home"></i> icon-home</option> <option><i class="icon-inbox"></i> icon-inbox</option> <option><i class="icon-info-sign"></i> icon-info-sign</option> <option><i class="icon-key"></i> icon-key</option> <option><i class="icon-leaf"></i> icon-leaf</option> <option><i class="icon-laptop"></i> icon-laptop</option> <option><i class="icon-legal"></i> icon-legal</option> <option><i class="icon-lemon"></i> icon-lemon</option> <option><i class="icon-lightbulb"></i> icon-lightbulb</option> <option><i class="icon-lock"></i> icon-lock</option> <option><i class="icon-unlock"></i> icon-unlock</option>  <option><i class="icon-magic"></i> icon-magic</option> <option><i class="icon-magnet"></i> icon-magnet</option> <option><i class="icon-map-marker"></i> icon-map-marker</option> <option><i class="icon-minus"></i> icon-minus</option> <option><i class="icon-minus-sign"></i> icon-minus-sign</option> <option><i class="icon-mobile-phone"></i> icon-mobile-phone</option> <option><i class="icon-money"></i> icon-money</option> <option><i class="icon-move"></i> icon-move</option> <option><i class="icon-music"></i> icon-music</option> <option><i class="icon-off"></i> icon-off</option> <option><i class="icon-ok"></i> icon-ok</option> <option><i class="icon-ok-circle"></i> icon-ok-circle</option> <option><i class="icon-ok-sign"></i> icon-ok-sign</option> <option><i class="icon-pencil"></i> icon-pencil</option> <option><i class="icon-picture"></i> icon-picture</option> <option><i class="icon-plane"></i> icon-plane</option> <option><i class="icon-plus"></i> icon-plus</option> <option><i class="icon-plus-sign"></i> icon-plus-sign</option> <option><i class="icon-print"></i> icon-print</option> <option><i class="icon-pushpin"></i> icon-pushpin</option> <option><i class="icon-qrcode"></i> icon-qrcode</option> <option><i class="icon-question-sign"></i> icon-question-sign</option> <option><i class="icon-quote-left"></i> icon-quote-left</option> <option><i class="icon-quote-right"></i> icon-quote-right</option> <option><i class="icon-random"></i> icon-random</option> <option><i class="icon-refresh icon-spin"></i> icon-refresh icon-spin</option> <option><i class="icon-remove"></i> icon-remove</option> <option><i class="icon-remove-circle"></i> icon-remove-circle</option> <option><i class="icon-remove-sign"></i> icon-remove-sign</option> <option><i class="icon-reorder"></i> icon-reorder</option> <option><i class="icon-reply"></i> icon-reply</option> <option><i class="icon-resize-horizontal"></i> icon-resize-horizontal</option> <option><i class="icon-resize-vertical"></i> icon-resize-vertical</option> <option><i class="icon-retweet"></i> icon-retweet</option> <option><i class="icon-road"></i> icon-road</option> <option><i class="icon-rss"></i> icon-rss</option> <option><i class="icon-screenshot"></i> icon-screenshot</option> <option><i class="icon-search"></i> icon-search</option>  <option><i class="icon-share"></i> icon-share</option> <option><i class="icon-share-alt"></i> icon-share-alt</option> <option><i class="icon-shopping-cart"></i> icon-shopping-cart</option> <option><i class="icon-signal"></i> icon-signal</option> <option><i class="icon-signin"></i> icon-signin</option> <option><i class="icon-signout"></i> icon-signout</option> <option><i class="icon-sitemap"></i> icon-sitemap</option> <option><i class="icon-sort"></i> icon-sort</option> <option><i class="icon-sort-down"></i> icon-sort-down</option> <option><i class="icon-sort-up"></i> icon-sort-up</option> <option><i class="icon-spinner icon-spin"></i> icon-spinner icon-spin</option> <option><i class="icon-star"></i> icon-star</option> <option><i class="icon-star-empty"></i> icon-star-empty</option> <option><i class="icon-star-half"></i> icon-star-half</option> <option><i class="icon-tablet"></i> icon-tablet</option> <option><i class="icon-tag"></i> icon-tag</option> <option><i class="icon-tags"></i> icon-tags</option> <option><i class="icon-tasks"></i> icon-tasks</option> <option><i class="icon-thumbs-down"></i> icon-thumbs-down</option> <option><i class="icon-thumbs-up"></i> icon-thumbs-up</option> <option><i class="icon-time"></i> icon-time</option> <option><i class="icon-tint"></i> icon-tint</option> <option><i class="icon-trash"></i> icon-trash</option> <option><i class="icon-trophy"></i> icon-trophy</option> <option><i class="icon-truck"></i> icon-truck</option> <option><i class="icon-umbrella"></i> icon-umbrella</option> <option><i class="icon-upload"></i> icon-upload</option> <option><i class="icon-upload-alt"></i> icon-upload-alt</option> <option><i class="icon-user"></i> icon-user</option> <option><i class="icon-user-md"></i> icon-user-md</option> <option><i class="icon-volume-off"></i> icon-volume-off</option> <option><i class="icon-volume-down"></i> icon-volume-down</option> <option><i class="icon-volume-up"></i> icon-volume-up</option> <option><i class="icon-warning-sign"></i> icon-warning-sign</option> <option><i class="icon-wrench"></i> icon-wrench</option> <option><i class="icon-zoom-in"></i> icon-zoom-in</option> <option><i class="icon-zoom-out"></i> icon-zoom-out</option>  <option><i class="icon-file"></i> icon-file</option> <option><i class="icon-file-alt"></i> icon-file-alt</option> <option><i class="icon-cut"></i> icon-cut</option> <option><i class="icon-copy"></i> icon-copy</option> <option><i class="icon-paste"></i> icon-paste</option> <option><i class="icon-save"></i> icon-save</option> <option><i class="icon-undo"></i> icon-undo</option> <option><i class="icon-repeat"></i> icon-repeat</option>  <option><i class="icon-text-height"></i> icon-text-height</option> <option><i class="icon-text-width"></i> icon-text-width</option> <option><i class="icon-align-left"></i> icon-align-left</option> <option><i class="icon-align-center"></i> icon-align-center</option> <option><i class="icon-align-right"></i> icon-align-right</option> <option><i class="icon-align-justify"></i> icon-align-justify</option> <option><i class="icon-indent-left"></i> icon-indent-left</option> <option><i class="icon-indent-right"></i> icon-indent-right</option>  <option><i class="icon-font"></i> icon-font</option> <option><i class="icon-bold"></i> icon-bold</option> <option><i class="icon-italic"></i> icon-italic</option> <option><i class="icon-strikethrough"></i> icon-strikethrough</option> <option><i class="icon-underline"></i> icon-underline</option> <option><i class="icon-link"></i> icon-link</option> <option><i class="icon-paper-clip"></i> icon-paper-clip</option> <option><i class="icon-columns"></i> icon-columns</option>  <option><i class="icon-table"></i> icon-table</option> <option><i class="icon-th-large"></i> icon-th-large</option> <option><i class="icon-th"></i> icon-th</option> <option><i class="icon-th-list"></i> icon-th-list</option> <option><i class="icon-list"></i> icon-list</option> <option><i class="icon-list-ol"></i> icon-list-ol</option> <option><i class="icon-list-ul"></i> icon-list-ul</option> <option><i class="icon-list-alt"></i> icon-list-alt</option>  <option><i class="icon-angle-left"></i> icon-angle-left</option> <option><i class="icon-angle-right"></i> icon-angle-right</option> <option><i class="icon-angle-up"></i> icon-angle-up</option> <option><i class="icon-angle-down"></i> icon-angle-down</option> <option><i class="icon-arrow-down"></i> icon-arrow-down</option> <option><i class="icon-arrow-left"></i> icon-arrow-left</option> <option><i class="icon-arrow-right"></i> icon-arrow-right</option> <option><i class="icon-arrow-up"></i> icon-arrow-up</option>  <option><i class="icon-caret-down"></i> icon-caret-down</option> <option><i class="icon-caret-left"></i> icon-caret-left</option> <option><i class="icon-caret-right"></i> icon-caret-right</option> <option><i class="icon-caret-up"></i> icon-caret-up</option> <option><i class="icon-chevron-down"></i> icon-chevron-down</option> <option><i class="icon-chevron-left"></i> icon-chevron-left</option> <option><i class="icon-chevron-right"></i> icon-chevron-right</option> <option><i class="icon-chevron-up"></i> icon-chevron-up</option>  <option><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</option> <option><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</option> <option><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</option> <option><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</option> <option><i class="icon-double-angle-left"></i> icon-double-angle-left</option> <option><i class="icon-double-angle-right"></i> icon-double-angle-right</option> <option><i class="icon-double-angle-up"></i> icon-double-angle-up</option> <option><i class="icon-double-angle-down"></i> icon-double-angle-down</option>  <option><i class="icon-hand-down"></i> icon-hand-down</option> <option><i class="icon-hand-left"></i> icon-hand-left</option> <option><i class="icon-hand-right"></i> icon-hand-right</option> <option><i class="icon-hand-up"></i> icon-hand-up</option> <option><i class="icon-circle"></i> icon-circle</option> <option><i class="icon-circle-blank"></i> icon-circle-blank</option>  <option><i class="icon-play-circle"></i> icon-play-circle</option> <option><i class="icon-play"></i> icon-play</option> <option><i class="icon-pause"></i> icon-pause</option> <option><i class="icon-stop"></i> icon-stop</option>  <option><i class="icon-step-backward"></i> icon-step-backward</option> <option><i class="icon-fast-backward"></i> icon-fast-backward</option> <option><i class="icon-backward"></i> icon-backward</option> <option><i class="icon-forward"></i> icon-forward</option>  <option><i class="icon-fast-forward"></i> icon-fast-forward</option> <option><i class="icon-step-forward"></i> icon-step-forward</option> <option><i class="icon-eject"></i> icon-eject</option>  <option><i class="icon-fullscreen"></i> icon-fullscreen</option> <option><i class="icon-resize-full"></i> icon-resize-full</option> <option><i class="icon-resize-small"></i> icon-resize-small</option>  <option><i class="icon-ambulance"></i> icon-ambulance</option> <option><i class="icon-beaker"></i> icon-beaker</option> <option><i class="icon-h-sign"></i> icon-h-sign</option> <option><i class="icon-hospital"></i> icon-hospital</option>  <option><i class="icon-medkit"></i> icon-medkit</option> <option><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</option>  <option><i class="icon-stethoscope"></i> icon-stethoscope</option> <option><i class="icon-user-md"></i> icon-user-md</option> <option><i class="social-icon-apple"></i> social-icon-apple</option> <option><i class="social-icon-mac"></i> social-icon-mac</option> <option><i class="social-icon-android"></i> social-icon-android</option> <option><i class="social-icon-windows"></i> social-icon-windows</option> <option><i class="social-icon-soundcloud"></i> social-icon-soundcloud</option> <option><i class="social-icon-soundcloud-rectangle"></i> social-icon-soundcloud-rectangle</option> <option><i class="social-icon-dribbble"></i> social-icon-dribbble</option> <option><i class="social-icon-dribbble-round"></i> social-icon-dribbble-round</option> <option><i class="social-icon-dribbble-rectangle"></i> social-icon-dribbble-rectangle</option> <option><i class="social-icon-foptionckr"></i> social-icon-foptionckr</option> <option><i class="social-icon-foptionckr-round"></i> social-icon-foptionckr-round</option> <option><i class="social-icon-foptionckr-rectangle"></i> social-icon-foptionckr-rectangle</option> <option><i class="social-icon-html5-full"></i> social-icon-html5-full</option> <option><i class="social-icon-html5"></i> social-icon-html5</option> <option><i class="social-icon-css3"></i> social-icon-css3</option> <option><i class="social-icon-chrome"></i> social-icon-chrome</option> <option><i class="social-icon-firefox"></i> social-icon-firefox</option> <option><i class="social-icon-ie"></i> social-icon-ie</option> <option><i class="social-icon-opera"></i> social-icon-opera</option>  <option><i class="social-icon-safari"></i> social-icon-safari</option> <option><i class="social-icon-facebook-rectangle"></i> social-icon-facebook-rectangle</option> <option><i class="social-icon-facebook"></i> social-icon-facebook</option> <option><i class="social-icon-facebook-round"></i> social-icon-facebook-round</option> <option><i class="social-icon-twitter"></i> social-icon-twitter</option> <option><i class="social-icon-twitter-rectangle"></i> social-icon-twitter-rectangle</option> <option><i class="social-icon-twitter-round"></i> social-icon-twitter-round</option> <option><i class="social-icon-rss"></i> social-icon-rss</option> <option><i class="social-icon-rss-rectangle"></i> social-icon-rss-rectangle</option> <option><i class="social-icon-rss-round"></i> social-icon-rss-round</option> <option><i class="social-icon-google"></i> social-icon-google</option> <option><i class="social-icon-googleplus"></i> social-icon-googleplus</option> <option><i class="social-icon-google-drive"></i> social-icon-google-drive</option> <option><i class="social-icon-googleplus-tabs"></i> social-icon-googleplus-tabs</option> <option><i class="social-icon-googleplus-rectangle"></i> social-icon-googleplus-rectangle</option> <option><i class="social-icon-googleplus-round"></i> social-icon-googleplus-round</option> <option><i class="social-icon-word"></i> social-icon-word</option> <option><i class="social-icon-excel"></i> social-icon-excel</option> <option><i class="social-icon-pdf"></i> social-icon-pdf</option>  <option><i class="social-icon-joomla"></i> social-icon-joomla</option> <option><i class="social-icon-wordpress"></i> social-icon-wordpress</option> <option><i class="social-icon-wordpress-rectangle"></i> social-icon-wordpress-rectangle</option> <option><i class="social-icon-deoptioncious"></i> social-icon-deoptioncious</option> <option><i class="social-icon-deoptioncious-round"></i> social-icon-deoptioncious-round</option> <option><i class="social-icon-deoptioncious-rectangle"></i> social-icon-deoptioncious-rectangle</option> <option><i class="social-icon-picasa"></i> social-icon-picasa</option> <option><i class="social-icon-picasa-rectangle"></i> social-icon-picasa-rectangle</option> <option><i class="social-icon-pinterest"></i> social-icon-pinterest</option> <option><i class="social-icon-pinterest-round"></i> social-icon-pinterest-round</option> <option><i class="social-icon-pinterest-rectangle"></i> social-icon-pinterest-rectangle</option> <option><i class="social-icon-stumbleupon"></i> social-icon-stumbleupon</option> <option><i class="social-icon-stumbleupon-round"></i> social-icon-stumbleupon-round</option> <option><i class="social-icon-stumbleupon-rectangle"></i> social-icon-stumbleupon-rectangle</option> <option><i class="social-icon-linkedin"></i> social-icon-linkedin</option> <option><i class="social-icon-linkedin-round"></i> social-icon-linkedin-round</option> <option><i class="social-icon-linkedin-rectangle"></i> social-icon-linkedin-rectangle</option> <option><i class="social-icon-lastfm"></i> social-icon-lastfm</option> <option><i class="social-icon-lastfm-rectangle"></i> social-icon-lastfm-rectangle</option>  <option><i class="social-icon-forrst"></i> social-icon-forrst</option> <option><i class="social-icon-forrst-rectangle"></i> social-icon-forrst-rectangle</option> <option><i class="social-icon-deviantart"></i> social-icon-deviantart</option> <option><i class="social-icon-deviantart-round"></i> social-icon-deviantart-round</option> <option><i class="social-icon-deviantart-rectangle"></i> social-icon-deviantart-rectangle</option> <option><i class="social-icon-youtube-full"></i> social-icon-youtube-full</option> <option><i class="social-icon-youtube"></i> social-icon-youtube</option> <option><i class="social-icon-vimeo"></i> social-icon-vimeo</option> <option><i class="social-icon-vimeo-rectangle"></i> social-icon-vimeo-rectangle</option> <option><i class="social-icon-skype"></i> social-icon-skype</option> <option><i class="social-icon-xing-rectangle"></i> social-icon-xing-rectangle</option> <option><i class="social-icon-xing-round"></i> social-icon-xing-round</option> <option><i class="social-icon-paypal"></i> social-icon-paypal</option> <option><i class="social-icon-github"></i> social-icon-github</option> <option><i class="social-icon-github-mascot"></i> social-icon-github-mascot</option> <option><i class="social-icon-github-rectangle"></i> social-icon-github-rectangle</option> <option><i class="social-icon-github-kitty"></i> social-icon-github-kitty</option> <option><i class="social-icon-tumblr"></i> social-icon-tumblr</option> <option><i class="social-icon-tumblr-rectangle"></i> social-icon-tumblr-rectangle</option> <option><i class="social-icon-yahoo"></i> social-icon-yahoo</option> <option><i class="social-icon-yahoo-rectangle"></i> social-icon-yahoo-rectangle</option> </select><br> \
						</div>\
						<div>\
							<strong>Link '+(i+1)+' URL</strong><br> <input class="url" type="text" id="link-url-'+i+'" value="#" onclick="this.select()" /><br>\
						</div>\
					</div>';
				btnedit = '<div class="group" style=" max-width: 96.2%">\
						<div>\
							<strong>Button Text</strong><br> <input id="dropdown-text" type="text" value="Button Text" /><br>\
						</div>\
						<div>\
							<strong>Button Size</strong><br> <input type="radio" name="dropdown-size" value="Mini"> Mini <input type="radio" name="dropdown-size" value="Small"> Small <input type="radio" name="dropdown-size" value="Normal" checked="checked"> Normal <input type="radio" name="dropdown-size" value="Large"> Large<br>\
						</div>\
						<div>\
							<strong>Button Icon</strong><br> <select id="dropdown-icon"> <option selected="selected">none</option> <option><i class="icon-adjust"></i> icon-adjust</option> <option><i class="icon-asterisk"></i> icon-asterisk</option> <option><i class="icon-ban-circle"></i> icon-ban-circle</option> <option><i class="icon-bar-chart"></i> icon-bar-chart</option> <option><i class="icon-barcode"></i> icon-barcode</option> <option><i class="icon-beaker"></i> icon-beaker</option> <option><i class="icon-beer"></i> icon-beer</option> <option><i class="icon-bell"></i> icon-bell</option> <option><i class="icon-bell-alt"></i> icon-bell-alt</option> <option><i class="icon-bolt"></i> icon-bolt</option> <option><i class="icon-book"></i> icon-book</option> <option><i class="icon-bookmark"></i> icon-bookmark</option> <option><i class="icon-bookmark-empty"></i> icon-bookmark-empty</option> <option><i class="icon-briefcase"></i> icon-briefcase</option> <option><i class="icon-bullhorn"></i> icon-bullhorn</option> <option><i class="icon-calendar"></i> icon-calendar</option> <option><i class="icon-camera"></i> icon-camera</option> <option><i class="icon-camera-retro"></i> icon-camera-retro</option> <option><i class="icon-certificate"></i> icon-certificate</option> <option><i class="icon-check"></i> icon-check</option> <option><i class="icon-check-empty"></i> icon-check-empty</option> <option><i class="icon-circle"></i> icon-circle</option> <option><i class="icon-circle-blank"></i> icon-circle-blank</option> <option><i class="icon-cloud"></i> icon-cloud</option> <option><i class="icon-cloud-download"></i> icon-cloud-download</option> <option><i class="icon-cloud-upload"></i> icon-cloud-upload</option> <option><i class="icon-coffee"></i> icon-coffee</option> <option><i class="icon-cog"></i> icon-cog</option> <option><i class="icon-cogs"></i> icon-cogs</option> <option><i class="icon-comment"></i> icon-comment</option> <option><i class="icon-comment-alt"></i> icon-comment-alt</option> <option><i class="icon-comments"></i> icon-comments</option> <option><i class="icon-comments-alt"></i> icon-comments-alt</option> <option><i class="icon-credit-card"></i> icon-credit-card</option> <option><i class="icon-dashboard"></i> icon-dashboard</option> <option><i class="icon-desktop"></i> icon-desktop</option> <option><i class="icon-download"></i> icon-download</option> <option><i class="icon-download-alt"></i> icon-download-alt</option>  <option><i class="icon-edit"></i> icon-edit</option> <option><i class="icon-envelope"></i> icon-envelope</option> <option><i class="icon-envelope-alt"></i> icon-envelope-alt</option> <option><i class="icon-exchange"></i> icon-exchange</option> <option><i class="icon-exclamation-sign"></i> icon-exclamation-sign</option> <option><i class="icon-external-link"></i> icon-external-link</option> <option><i class="icon-eye-close"></i> icon-eye-close</option> <option><i class="icon-eye-open"></i> icon-eye-open</option> <option><i class="icon-facetime-video"></i> icon-facetime-video</option> <option><i class="icon-fighter-jet"></i> icon-fighter-jet</option> <option><i class="icon-film"></i> icon-film</option> <option><i class="icon-filter"></i> icon-filter</option> <option><i class="icon-fire"></i> icon-fire</option> <option><i class="icon-flag"></i> icon-flag</option> <option><i class="icon-folder-close"></i> icon-folder-close</option> <option><i class="icon-folder-open"></i> icon-folder-open</option> <option><i class="icon-folder-close-alt"></i> icon-folder-close-alt</option> <option><i class="icon-folder-open-alt"></i> icon-folder-open-alt</option> <option><i class="icon-food"></i> icon-food</option> <option><i class="icon-gift"></i> icon-gift</option> <option><i class="icon-glass"></i> icon-glass</option> <option><i class="icon-globe"></i> icon-globe</option> <option><i class="icon-group"></i> icon-group</option> <option><i class="icon-hdd"></i> icon-hdd</option> <option><i class="icon-headphones"></i> icon-headphones</option> <option><i class="icon-heart"></i> icon-heart</option> <option><i class="icon-heart-empty"></i> icon-heart-empty</option> <option><i class="icon-home"></i> icon-home</option> <option><i class="icon-inbox"></i> icon-inbox</option> <option><i class="icon-info-sign"></i> icon-info-sign</option> <option><i class="icon-key"></i> icon-key</option> <option><i class="icon-leaf"></i> icon-leaf</option> <option><i class="icon-laptop"></i> icon-laptop</option> <option><i class="icon-legal"></i> icon-legal</option> <option><i class="icon-lemon"></i> icon-lemon</option> <option><i class="icon-lightbulb"></i> icon-lightbulb</option> <option><i class="icon-lock"></i> icon-lock</option> <option><i class="icon-unlock"></i> icon-unlock</option>  <option><i class="icon-magic"></i> icon-magic</option> <option><i class="icon-magnet"></i> icon-magnet</option> <option><i class="icon-map-marker"></i> icon-map-marker</option> <option><i class="icon-minus"></i> icon-minus</option> <option><i class="icon-minus-sign"></i> icon-minus-sign</option> <option><i class="icon-mobile-phone"></i> icon-mobile-phone</option> <option><i class="icon-money"></i> icon-money</option> <option><i class="icon-move"></i> icon-move</option> <option><i class="icon-music"></i> icon-music</option> <option><i class="icon-off"></i> icon-off</option> <option><i class="icon-ok"></i> icon-ok</option> <option><i class="icon-ok-circle"></i> icon-ok-circle</option> <option><i class="icon-ok-sign"></i> icon-ok-sign</option> <option><i class="icon-pencil"></i> icon-pencil</option> <option><i class="icon-picture"></i> icon-picture</option> <option><i class="icon-plane"></i> icon-plane</option> <option><i class="icon-plus"></i> icon-plus</option> <option><i class="icon-plus-sign"></i> icon-plus-sign</option> <option><i class="icon-print"></i> icon-print</option> <option><i class="icon-pushpin"></i> icon-pushpin</option> <option><i class="icon-qrcode"></i> icon-qrcode</option> <option><i class="icon-question-sign"></i> icon-question-sign</option> <option><i class="icon-quote-left"></i> icon-quote-left</option> <option><i class="icon-quote-right"></i> icon-quote-right</option> <option><i class="icon-random"></i> icon-random</option> <option><i class="icon-refresh icon-spin"></i> icon-refresh icon-spin</option> <option><i class="icon-remove"></i> icon-remove</option> <option><i class="icon-remove-circle"></i> icon-remove-circle</option> <option><i class="icon-remove-sign"></i> icon-remove-sign</option> <option><i class="icon-reorder"></i> icon-reorder</option> <option><i class="icon-reply"></i> icon-reply</option> <option><i class="icon-resize-horizontal"></i> icon-resize-horizontal</option> <option><i class="icon-resize-vertical"></i> icon-resize-vertical</option> <option><i class="icon-retweet"></i> icon-retweet</option> <option><i class="icon-road"></i> icon-road</option> <option><i class="icon-rss"></i> icon-rss</option> <option><i class="icon-screenshot"></i> icon-screenshot</option> <option><i class="icon-search"></i> icon-search</option>  <option><i class="icon-share"></i> icon-share</option> <option><i class="icon-share-alt"></i> icon-share-alt</option> <option><i class="icon-shopping-cart"></i> icon-shopping-cart</option> <option><i class="icon-signal"></i> icon-signal</option> <option><i class="icon-signin"></i> icon-signin</option> <option><i class="icon-signout"></i> icon-signout</option> <option><i class="icon-sitemap"></i> icon-sitemap</option> <option><i class="icon-sort"></i> icon-sort</option> <option><i class="icon-sort-down"></i> icon-sort-down</option> <option><i class="icon-sort-up"></i> icon-sort-up</option> <option><i class="icon-spinner icon-spin"></i> icon-spinner icon-spin</option> <option><i class="icon-star"></i> icon-star</option> <option><i class="icon-star-empty"></i> icon-star-empty</option> <option><i class="icon-star-half"></i> icon-star-half</option> <option><i class="icon-tablet"></i> icon-tablet</option> <option><i class="icon-tag"></i> icon-tag</option> <option><i class="icon-tags"></i> icon-tags</option> <option><i class="icon-tasks"></i> icon-tasks</option> <option><i class="icon-thumbs-down"></i> icon-thumbs-down</option> <option><i class="icon-thumbs-up"></i> icon-thumbs-up</option> <option><i class="icon-time"></i> icon-time</option> <option><i class="icon-tint"></i> icon-tint</option> <option><i class="icon-trash"></i> icon-trash</option> <option><i class="icon-trophy"></i> icon-trophy</option> <option><i class="icon-truck"></i> icon-truck</option> <option><i class="icon-umbrella"></i> icon-umbrella</option> <option><i class="icon-upload"></i> icon-upload</option> <option><i class="icon-upload-alt"></i> icon-upload-alt</option> <option><i class="icon-user"></i> icon-user</option> <option><i class="icon-user-md"></i> icon-user-md</option> <option><i class="icon-volume-off"></i> icon-volume-off</option> <option><i class="icon-volume-down"></i> icon-volume-down</option> <option><i class="icon-volume-up"></i> icon-volume-up</option> <option><i class="icon-warning-sign"></i> icon-warning-sign</option> <option><i class="icon-wrench"></i> icon-wrench</option> <option><i class="icon-zoom-in"></i> icon-zoom-in</option> <option><i class="icon-zoom-out"></i> icon-zoom-out</option>  <option><i class="icon-file"></i> icon-file</option> <option><i class="icon-file-alt"></i> icon-file-alt</option> <option><i class="icon-cut"></i> icon-cut</option> <option><i class="icon-copy"></i> icon-copy</option> <option><i class="icon-paste"></i> icon-paste</option> <option><i class="icon-save"></i> icon-save</option> <option><i class="icon-undo"></i> icon-undo</option> <option><i class="icon-repeat"></i> icon-repeat</option>  <option><i class="icon-text-height"></i> icon-text-height</option> <option><i class="icon-text-width"></i> icon-text-width</option> <option><i class="icon-align-left"></i> icon-align-left</option> <option><i class="icon-align-center"></i> icon-align-center</option> <option><i class="icon-align-right"></i> icon-align-right</option> <option><i class="icon-align-justify"></i> icon-align-justify</option> <option><i class="icon-indent-left"></i> icon-indent-left</option> <option><i class="icon-indent-right"></i> icon-indent-right</option>  <option><i class="icon-font"></i> icon-font</option> <option><i class="icon-bold"></i> icon-bold</option> <option><i class="icon-italic"></i> icon-italic</option> <option><i class="icon-strikethrough"></i> icon-strikethrough</option> <option><i class="icon-underline"></i> icon-underline</option> <option><i class="icon-link"></i> icon-link</option> <option><i class="icon-paper-clip"></i> icon-paper-clip</option> <option><i class="icon-columns"></i> icon-columns</option>  <option><i class="icon-table"></i> icon-table</option> <option><i class="icon-th-large"></i> icon-th-large</option> <option><i class="icon-th"></i> icon-th</option> <option><i class="icon-th-list"></i> icon-th-list</option> <option><i class="icon-list"></i> icon-list</option> <option><i class="icon-list-ol"></i> icon-list-ol</option> <option><i class="icon-list-ul"></i> icon-list-ul</option> <option><i class="icon-list-alt"></i> icon-list-alt</option>  <option><i class="icon-angle-left"></i> icon-angle-left</option> <option><i class="icon-angle-right"></i> icon-angle-right</option> <option><i class="icon-angle-up"></i> icon-angle-up</option> <option><i class="icon-angle-down"></i> icon-angle-down</option> <option><i class="icon-arrow-down"></i> icon-arrow-down</option> <option><i class="icon-arrow-left"></i> icon-arrow-left</option> <option><i class="icon-arrow-right"></i> icon-arrow-right</option> <option><i class="icon-arrow-up"></i> icon-arrow-up</option>  <option><i class="icon-caret-down"></i> icon-caret-down</option> <option><i class="icon-caret-left"></i> icon-caret-left</option> <option><i class="icon-caret-right"></i> icon-caret-right</option> <option><i class="icon-caret-up"></i> icon-caret-up</option> <option><i class="icon-chevron-down"></i> icon-chevron-down</option> <option><i class="icon-chevron-left"></i> icon-chevron-left</option> <option><i class="icon-chevron-right"></i> icon-chevron-right</option> <option><i class="icon-chevron-up"></i> icon-chevron-up</option>  <option><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</option> <option><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</option> <option><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</option> <option><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</option> <option><i class="icon-double-angle-left"></i> icon-double-angle-left</option> <option><i class="icon-double-angle-right"></i> icon-double-angle-right</option> <option><i class="icon-double-angle-up"></i> icon-double-angle-up</option> <option><i class="icon-double-angle-down"></i> icon-double-angle-down</option>  <option><i class="icon-hand-down"></i> icon-hand-down</option> <option><i class="icon-hand-left"></i> icon-hand-left</option> <option><i class="icon-hand-right"></i> icon-hand-right</option> <option><i class="icon-hand-up"></i> icon-hand-up</option> <option><i class="icon-circle"></i> icon-circle</option> <option><i class="icon-circle-blank"></i> icon-circle-blank</option>  <option><i class="icon-play-circle"></i> icon-play-circle</option> <option><i class="icon-play"></i> icon-play</option> <option><i class="icon-pause"></i> icon-pause</option> <option><i class="icon-stop"></i> icon-stop</option>  <option><i class="icon-step-backward"></i> icon-step-backward</option> <option><i class="icon-fast-backward"></i> icon-fast-backward</option> <option><i class="icon-backward"></i> icon-backward</option> <option><i class="icon-forward"></i> icon-forward</option>  <option><i class="icon-fast-forward"></i> icon-fast-forward</option> <option><i class="icon-step-forward"></i> icon-step-forward</option> <option><i class="icon-eject"></i> icon-eject</option>  <option><i class="icon-fullscreen"></i> icon-fullscreen</option> <option><i class="icon-resize-full"></i> icon-resize-full</option> <option><i class="icon-resize-small"></i> icon-resize-small</option>  <option><i class="icon-ambulance"></i> icon-ambulance</option> <option><i class="icon-beaker"></i> icon-beaker</option> <option><i class="icon-h-sign"></i> icon-h-sign</option> <option><i class="icon-hospital"></i> icon-hospital</option>  <option><i class="icon-medkit"></i> icon-medkit</option> <option><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</option>  <option><i class="icon-stethoscope"></i> icon-stethoscope</option> <option><i class="icon-user-md"></i> icon-user-md</option> <option><i class="social-icon-apple"></i> social-icon-apple</option> <option><i class="social-icon-mac"></i> social-icon-mac</option> <option><i class="social-icon-android"></i> social-icon-android</option> <option><i class="social-icon-windows"></i> social-icon-windows</option> <option><i class="social-icon-soundcloud"></i> social-icon-soundcloud</option> <option><i class="social-icon-soundcloud-rectangle"></i> social-icon-soundcloud-rectangle</option> <option><i class="social-icon-dribbble"></i> social-icon-dribbble</option> <option><i class="social-icon-dribbble-round"></i> social-icon-dribbble-round</option> <option><i class="social-icon-dribbble-rectangle"></i> social-icon-dribbble-rectangle</option> <option><i class="social-icon-foptionckr"></i> social-icon-foptionckr</option> <option><i class="social-icon-foptionckr-round"></i> social-icon-foptionckr-round</option> <option><i class="social-icon-foptionckr-rectangle"></i> social-icon-foptionckr-rectangle</option> <option><i class="social-icon-html5-full"></i> social-icon-html5-full</option> <option><i class="social-icon-html5"></i> social-icon-html5</option> <option><i class="social-icon-css3"></i> social-icon-css3</option> <option><i class="social-icon-chrome"></i> social-icon-chrome</option> <option><i class="social-icon-firefox"></i> social-icon-firefox</option> <option><i class="social-icon-ie"></i> social-icon-ie</option> <option><i class="social-icon-opera"></i> social-icon-opera</option>  <option><i class="social-icon-safari"></i> social-icon-safari</option> <option><i class="social-icon-facebook-rectangle"></i> social-icon-facebook-rectangle</option> <option><i class="social-icon-facebook"></i> social-icon-facebook</option> <option><i class="social-icon-facebook-round"></i> social-icon-facebook-round</option> <option><i class="social-icon-twitter"></i> social-icon-twitter</option> <option><i class="social-icon-twitter-rectangle"></i> social-icon-twitter-rectangle</option> <option><i class="social-icon-twitter-round"></i> social-icon-twitter-round</option> <option><i class="social-icon-rss"></i> social-icon-rss</option> <option><i class="social-icon-rss-rectangle"></i> social-icon-rss-rectangle</option> <option><i class="social-icon-rss-round"></i> social-icon-rss-round</option> <option><i class="social-icon-google"></i> social-icon-google</option> <option><i class="social-icon-googleplus"></i> social-icon-googleplus</option> <option><i class="social-icon-google-drive"></i> social-icon-google-drive</option> <option><i class="social-icon-googleplus-tabs"></i> social-icon-googleplus-tabs</option> <option><i class="social-icon-googleplus-rectangle"></i> social-icon-googleplus-rectangle</option> <option><i class="social-icon-googleplus-round"></i> social-icon-googleplus-round</option> <option><i class="social-icon-word"></i> social-icon-word</option> <option><i class="social-icon-excel"></i> social-icon-excel</option> <option><i class="social-icon-pdf"></i> social-icon-pdf</option>  <option><i class="social-icon-joomla"></i> social-icon-joomla</option> <option><i class="social-icon-wordpress"></i> social-icon-wordpress</option> <option><i class="social-icon-wordpress-rectangle"></i> social-icon-wordpress-rectangle</option> <option><i class="social-icon-deoptioncious"></i> social-icon-deoptioncious</option> <option><i class="social-icon-deoptioncious-round"></i> social-icon-deoptioncious-round</option> <option><i class="social-icon-deoptioncious-rectangle"></i> social-icon-deoptioncious-rectangle</option> <option><i class="social-icon-picasa"></i> social-icon-picasa</option> <option><i class="social-icon-picasa-rectangle"></i> social-icon-picasa-rectangle</option> <option><i class="social-icon-pinterest"></i> social-icon-pinterest</option> <option><i class="social-icon-pinterest-round"></i> social-icon-pinterest-round</option> <option><i class="social-icon-pinterest-rectangle"></i> social-icon-pinterest-rectangle</option> <option><i class="social-icon-stumbleupon"></i> social-icon-stumbleupon</option> <option><i class="social-icon-stumbleupon-round"></i> social-icon-stumbleupon-round</option> <option><i class="social-icon-stumbleupon-rectangle"></i> social-icon-stumbleupon-rectangle</option> <option><i class="social-icon-linkedin"></i> social-icon-linkedin</option> <option><i class="social-icon-linkedin-round"></i> social-icon-linkedin-round</option> <option><i class="social-icon-linkedin-rectangle"></i> social-icon-linkedin-rectangle</option> <option><i class="social-icon-lastfm"></i> social-icon-lastfm</option> <option><i class="social-icon-lastfm-rectangle"></i> social-icon-lastfm-rectangle</option>  <option><i class="social-icon-forrst"></i> social-icon-forrst</option> <option><i class="social-icon-forrst-rectangle"></i> social-icon-forrst-rectangle</option> <option><i class="social-icon-deviantart"></i> social-icon-deviantart</option> <option><i class="social-icon-deviantart-round"></i> social-icon-deviantart-round</option> <option><i class="social-icon-deviantart-rectangle"></i> social-icon-deviantart-rectangle</option> <option><i class="social-icon-youtube-full"></i> social-icon-youtube-full</option> <option><i class="social-icon-youtube"></i> social-icon-youtube</option> <option><i class="social-icon-vimeo"></i> social-icon-vimeo</option> <option><i class="social-icon-vimeo-rectangle"></i> social-icon-vimeo-rectangle</option> <option><i class="social-icon-skype"></i> social-icon-skype</option> <option><i class="social-icon-xing-rectangle"></i> social-icon-xing-rectangle</option> <option><i class="social-icon-xing-round"></i> social-icon-xing-round</option> <option><i class="social-icon-paypal"></i> social-icon-paypal</option> <option><i class="social-icon-github"></i> social-icon-github</option> <option><i class="social-icon-github-mascot"></i> social-icon-github-mascot</option> <option><i class="social-icon-github-rectangle"></i> social-icon-github-rectangle</option> <option><i class="social-icon-github-kitty"></i> social-icon-github-kitty</option> <option><i class="social-icon-tumblr"></i> social-icon-tumblr</option> <option><i class="social-icon-tumblr-rectangle"></i> social-icon-tumblr-rectangle</option> <option><i class="social-icon-yahoo"></i> social-icon-yahoo</option> <option><i class="social-icon-yahoo-rectangle"></i> social-icon-yahoo-rectangle</option> </select><br> \
						</div>\
						<div>\
							<strong>Button Color</strong><br> <input type="radio" name="dropdown-color" value="Default" checked="checked"> Default <input type="radio" name="dropdown-color" value="Primary"> Primary <input type="radio" name="dropdown-color" value="Info"> Info <input type="radio" name="dropdown-color" value="Success">\ Success<br> <input type="radio" name="dropdown-color" value="Warning"> Warning <input type="radio" name="dropdown-color" value="Danger"> Danger <input type="radio" name="dropdown-color" value="Inverse"> Inverse <input type="radio" name="dropdown-color" value="Link"> Link\
						</div>\
					</div>';
			};
			$('<div class="btn-group"><button class="btn dropdown-toggle" data-toggle="dropdown"><i></i> Button <span class="caret"></span> </button> <ul class="dropdown-menu"> </ul> </div>').appendTo('#button-body #demo_button');
			$(btnedit).appendTo('#demo_code');
			$(itemedit).appendTo('#demo_code');
			$(item).appendTo('#demo_button .btn-group .dropdown-menu');
		};
		
		function append_dropdown_split(cols){
			if(isNaN(cols)||cols>99) return;
			$('#demo_button').empty();
			var num = cols;
			var item = '';
			var itemedit = '';
			var btnedit = '';
				
			for(i=0;i<num;i++){
				item += '<li><a id="link-'+(i+1)+'" href="#btn-'+(i+1)+'"><i></i> Link'+(i+1)+'</a></li>';
				 
				itemedit += '<div class="item" style="max-width: 47%; ">\
						<div>\
							<strong>Link '+(i+1)+' Text</strong><br> <input class="text" type="text" id="link-text-'+i+'" value="Link '+(i+1)+' Text" /><br>\
						</div>\
						<div>\
							<strong>Link '+(i+1)+' Icon</strong><br> <select class="icon" id="link-icon-'+i+'"> <option selected="selected">none</option> <option><i class="icon-adjust"></i> icon-adjust</option> <option><i class="icon-asterisk"></i> icon-asterisk</option> <option><i class="icon-ban-circle"></i> icon-ban-circle</option> <option><i class="icon-bar-chart"></i> icon-bar-chart</option> <option><i class="icon-barcode"></i> icon-barcode</option> <option><i class="icon-beaker"></i> icon-beaker</option> <option><i class="icon-beer"></i> icon-beer</option> <option><i class="icon-bell"></i> icon-bell</option> <option><i class="icon-bell-alt"></i> icon-bell-alt</option> <option><i class="icon-bolt"></i> icon-bolt</option> <option><i class="icon-book"></i> icon-book</option> <option><i class="icon-bookmark"></i> icon-bookmark</option> <option><i class="icon-bookmark-empty"></i> icon-bookmark-empty</option> <option><i class="icon-briefcase"></i> icon-briefcase</option> <option><i class="icon-bullhorn"></i> icon-bullhorn</option> <option><i class="icon-calendar"></i> icon-calendar</option> <option><i class="icon-camera"></i> icon-camera</option> <option><i class="icon-camera-retro"></i> icon-camera-retro</option> <option><i class="icon-certificate"></i> icon-certificate</option> <option><i class="icon-check"></i> icon-check</option> <option><i class="icon-check-empty"></i> icon-check-empty</option> <option><i class="icon-circle"></i> icon-circle</option> <option><i class="icon-circle-blank"></i> icon-circle-blank</option> <option><i class="icon-cloud"></i> icon-cloud</option> <option><i class="icon-cloud-download"></i> icon-cloud-download</option> <option><i class="icon-cloud-upload"></i> icon-cloud-upload</option> <option><i class="icon-coffee"></i> icon-coffee</option> <option><i class="icon-cog"></i> icon-cog</option> <option><i class="icon-cogs"></i> icon-cogs</option> <option><i class="icon-comment"></i> icon-comment</option> <option><i class="icon-comment-alt"></i> icon-comment-alt</option> <option><i class="icon-comments"></i> icon-comments</option> <option><i class="icon-comments-alt"></i> icon-comments-alt</option> <option><i class="icon-credit-card"></i> icon-credit-card</option> <option><i class="icon-dashboard"></i> icon-dashboard</option> <option><i class="icon-desktop"></i> icon-desktop</option> <option><i class="icon-download"></i> icon-download</option> <option><i class="icon-download-alt"></i> icon-download-alt</option>  <option><i class="icon-edit"></i> icon-edit</option> <option><i class="icon-envelope"></i> icon-envelope</option> <option><i class="icon-envelope-alt"></i> icon-envelope-alt</option> <option><i class="icon-exchange"></i> icon-exchange</option> <option><i class="icon-exclamation-sign"></i> icon-exclamation-sign</option> <option><i class="icon-external-link"></i> icon-external-link</option> <option><i class="icon-eye-close"></i> icon-eye-close</option> <option><i class="icon-eye-open"></i> icon-eye-open</option> <option><i class="icon-facetime-video"></i> icon-facetime-video</option> <option><i class="icon-fighter-jet"></i> icon-fighter-jet</option> <option><i class="icon-film"></i> icon-film</option> <option><i class="icon-filter"></i> icon-filter</option> <option><i class="icon-fire"></i> icon-fire</option> <option><i class="icon-flag"></i> icon-flag</option> <option><i class="icon-folder-close"></i> icon-folder-close</option> <option><i class="icon-folder-open"></i> icon-folder-open</option> <option><i class="icon-folder-close-alt"></i> icon-folder-close-alt</option> <option><i class="icon-folder-open-alt"></i> icon-folder-open-alt</option> <option><i class="icon-food"></i> icon-food</option> <option><i class="icon-gift"></i> icon-gift</option> <option><i class="icon-glass"></i> icon-glass</option> <option><i class="icon-globe"></i> icon-globe</option> <option><i class="icon-group"></i> icon-group</option> <option><i class="icon-hdd"></i> icon-hdd</option> <option><i class="icon-headphones"></i> icon-headphones</option> <option><i class="icon-heart"></i> icon-heart</option> <option><i class="icon-heart-empty"></i> icon-heart-empty</option> <option><i class="icon-home"></i> icon-home</option> <option><i class="icon-inbox"></i> icon-inbox</option> <option><i class="icon-info-sign"></i> icon-info-sign</option> <option><i class="icon-key"></i> icon-key</option> <option><i class="icon-leaf"></i> icon-leaf</option> <option><i class="icon-laptop"></i> icon-laptop</option> <option><i class="icon-legal"></i> icon-legal</option> <option><i class="icon-lemon"></i> icon-lemon</option> <option><i class="icon-lightbulb"></i> icon-lightbulb</option> <option><i class="icon-lock"></i> icon-lock</option> <option><i class="icon-unlock"></i> icon-unlock</option>  <option><i class="icon-magic"></i> icon-magic</option> <option><i class="icon-magnet"></i> icon-magnet</option> <option><i class="icon-map-marker"></i> icon-map-marker</option> <option><i class="icon-minus"></i> icon-minus</option> <option><i class="icon-minus-sign"></i> icon-minus-sign</option> <option><i class="icon-mobile-phone"></i> icon-mobile-phone</option> <option><i class="icon-money"></i> icon-money</option> <option><i class="icon-move"></i> icon-move</option> <option><i class="icon-music"></i> icon-music</option> <option><i class="icon-off"></i> icon-off</option> <option><i class="icon-ok"></i> icon-ok</option> <option><i class="icon-ok-circle"></i> icon-ok-circle</option> <option><i class="icon-ok-sign"></i> icon-ok-sign</option> <option><i class="icon-pencil"></i> icon-pencil</option> <option><i class="icon-picture"></i> icon-picture</option> <option><i class="icon-plane"></i> icon-plane</option> <option><i class="icon-plus"></i> icon-plus</option> <option><i class="icon-plus-sign"></i> icon-plus-sign</option> <option><i class="icon-print"></i> icon-print</option> <option><i class="icon-pushpin"></i> icon-pushpin</option> <option><i class="icon-qrcode"></i> icon-qrcode</option> <option><i class="icon-question-sign"></i> icon-question-sign</option> <option><i class="icon-quote-left"></i> icon-quote-left</option> <option><i class="icon-quote-right"></i> icon-quote-right</option> <option><i class="icon-random"></i> icon-random</option> <option><i class="icon-refresh icon-spin"></i> icon-refresh icon-spin</option> <option><i class="icon-remove"></i> icon-remove</option> <option><i class="icon-remove-circle"></i> icon-remove-circle</option> <option><i class="icon-remove-sign"></i> icon-remove-sign</option> <option><i class="icon-reorder"></i> icon-reorder</option> <option><i class="icon-reply"></i> icon-reply</option> <option><i class="icon-resize-horizontal"></i> icon-resize-horizontal</option> <option><i class="icon-resize-vertical"></i> icon-resize-vertical</option> <option><i class="icon-retweet"></i> icon-retweet</option> <option><i class="icon-road"></i> icon-road</option> <option><i class="icon-rss"></i> icon-rss</option> <option><i class="icon-screenshot"></i> icon-screenshot</option> <option><i class="icon-search"></i> icon-search</option>  <option><i class="icon-share"></i> icon-share</option> <option><i class="icon-share-alt"></i> icon-share-alt</option> <option><i class="icon-shopping-cart"></i> icon-shopping-cart</option> <option><i class="icon-signal"></i> icon-signal</option> <option><i class="icon-signin"></i> icon-signin</option> <option><i class="icon-signout"></i> icon-signout</option> <option><i class="icon-sitemap"></i> icon-sitemap</option> <option><i class="icon-sort"></i> icon-sort</option> <option><i class="icon-sort-down"></i> icon-sort-down</option> <option><i class="icon-sort-up"></i> icon-sort-up</option> <option><i class="icon-spinner icon-spin"></i> icon-spinner icon-spin</option> <option><i class="icon-star"></i> icon-star</option> <option><i class="icon-star-empty"></i> icon-star-empty</option> <option><i class="icon-star-half"></i> icon-star-half</option> <option><i class="icon-tablet"></i> icon-tablet</option> <option><i class="icon-tag"></i> icon-tag</option> <option><i class="icon-tags"></i> icon-tags</option> <option><i class="icon-tasks"></i> icon-tasks</option> <option><i class="icon-thumbs-down"></i> icon-thumbs-down</option> <option><i class="icon-thumbs-up"></i> icon-thumbs-up</option> <option><i class="icon-time"></i> icon-time</option> <option><i class="icon-tint"></i> icon-tint</option> <option><i class="icon-trash"></i> icon-trash</option> <option><i class="icon-trophy"></i> icon-trophy</option> <option><i class="icon-truck"></i> icon-truck</option> <option><i class="icon-umbrella"></i> icon-umbrella</option> <option><i class="icon-upload"></i> icon-upload</option> <option><i class="icon-upload-alt"></i> icon-upload-alt</option> <option><i class="icon-user"></i> icon-user</option> <option><i class="icon-user-md"></i> icon-user-md</option> <option><i class="icon-volume-off"></i> icon-volume-off</option> <option><i class="icon-volume-down"></i> icon-volume-down</option> <option><i class="icon-volume-up"></i> icon-volume-up</option> <option><i class="icon-warning-sign"></i> icon-warning-sign</option> <option><i class="icon-wrench"></i> icon-wrench</option> <option><i class="icon-zoom-in"></i> icon-zoom-in</option> <option><i class="icon-zoom-out"></i> icon-zoom-out</option>  <option><i class="icon-file"></i> icon-file</option> <option><i class="icon-file-alt"></i> icon-file-alt</option> <option><i class="icon-cut"></i> icon-cut</option> <option><i class="icon-copy"></i> icon-copy</option> <option><i class="icon-paste"></i> icon-paste</option> <option><i class="icon-save"></i> icon-save</option> <option><i class="icon-undo"></i> icon-undo</option> <option><i class="icon-repeat"></i> icon-repeat</option>  <option><i class="icon-text-height"></i> icon-text-height</option> <option><i class="icon-text-width"></i> icon-text-width</option> <option><i class="icon-align-left"></i> icon-align-left</option> <option><i class="icon-align-center"></i> icon-align-center</option> <option><i class="icon-align-right"></i> icon-align-right</option> <option><i class="icon-align-justify"></i> icon-align-justify</option> <option><i class="icon-indent-left"></i> icon-indent-left</option> <option><i class="icon-indent-right"></i> icon-indent-right</option>  <option><i class="icon-font"></i> icon-font</option> <option><i class="icon-bold"></i> icon-bold</option> <option><i class="icon-italic"></i> icon-italic</option> <option><i class="icon-strikethrough"></i> icon-strikethrough</option> <option><i class="icon-underline"></i> icon-underline</option> <option><i class="icon-link"></i> icon-link</option> <option><i class="icon-paper-clip"></i> icon-paper-clip</option> <option><i class="icon-columns"></i> icon-columns</option>  <option><i class="icon-table"></i> icon-table</option> <option><i class="icon-th-large"></i> icon-th-large</option> <option><i class="icon-th"></i> icon-th</option> <option><i class="icon-th-list"></i> icon-th-list</option> <option><i class="icon-list"></i> icon-list</option> <option><i class="icon-list-ol"></i> icon-list-ol</option> <option><i class="icon-list-ul"></i> icon-list-ul</option> <option><i class="icon-list-alt"></i> icon-list-alt</option>  <option><i class="icon-angle-left"></i> icon-angle-left</option> <option><i class="icon-angle-right"></i> icon-angle-right</option> <option><i class="icon-angle-up"></i> icon-angle-up</option> <option><i class="icon-angle-down"></i> icon-angle-down</option> <option><i class="icon-arrow-down"></i> icon-arrow-down</option> <option><i class="icon-arrow-left"></i> icon-arrow-left</option> <option><i class="icon-arrow-right"></i> icon-arrow-right</option> <option><i class="icon-arrow-up"></i> icon-arrow-up</option>  <option><i class="icon-caret-down"></i> icon-caret-down</option> <option><i class="icon-caret-left"></i> icon-caret-left</option> <option><i class="icon-caret-right"></i> icon-caret-right</option> <option><i class="icon-caret-up"></i> icon-caret-up</option> <option><i class="icon-chevron-down"></i> icon-chevron-down</option> <option><i class="icon-chevron-left"></i> icon-chevron-left</option> <option><i class="icon-chevron-right"></i> icon-chevron-right</option> <option><i class="icon-chevron-up"></i> icon-chevron-up</option>  <option><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</option> <option><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</option> <option><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</option> <option><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</option> <option><i class="icon-double-angle-left"></i> icon-double-angle-left</option> <option><i class="icon-double-angle-right"></i> icon-double-angle-right</option> <option><i class="icon-double-angle-up"></i> icon-double-angle-up</option> <option><i class="icon-double-angle-down"></i> icon-double-angle-down</option>  <option><i class="icon-hand-down"></i> icon-hand-down</option> <option><i class="icon-hand-left"></i> icon-hand-left</option> <option><i class="icon-hand-right"></i> icon-hand-right</option> <option><i class="icon-hand-up"></i> icon-hand-up</option> <option><i class="icon-circle"></i> icon-circle</option> <option><i class="icon-circle-blank"></i> icon-circle-blank</option>  <option><i class="icon-play-circle"></i> icon-play-circle</option> <option><i class="icon-play"></i> icon-play</option> <option><i class="icon-pause"></i> icon-pause</option> <option><i class="icon-stop"></i> icon-stop</option>  <option><i class="icon-step-backward"></i> icon-step-backward</option> <option><i class="icon-fast-backward"></i> icon-fast-backward</option> <option><i class="icon-backward"></i> icon-backward</option> <option><i class="icon-forward"></i> icon-forward</option>  <option><i class="icon-fast-forward"></i> icon-fast-forward</option> <option><i class="icon-step-forward"></i> icon-step-forward</option> <option><i class="icon-eject"></i> icon-eject</option>  <option><i class="icon-fullscreen"></i> icon-fullscreen</option> <option><i class="icon-resize-full"></i> icon-resize-full</option> <option><i class="icon-resize-small"></i> icon-resize-small</option>  <option><i class="icon-ambulance"></i> icon-ambulance</option> <option><i class="icon-beaker"></i> icon-beaker</option> <option><i class="icon-h-sign"></i> icon-h-sign</option> <option><i class="icon-hospital"></i> icon-hospital</option>  <option><i class="icon-medkit"></i> icon-medkit</option> <option><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</option>  <option><i class="icon-stethoscope"></i> icon-stethoscope</option> <option><i class="icon-user-md"></i> icon-user-md</option> <option><i class="social-icon-apple"></i> social-icon-apple</option> <option><i class="social-icon-mac"></i> social-icon-mac</option> <option><i class="social-icon-android"></i> social-icon-android</option> <option><i class="social-icon-windows"></i> social-icon-windows</option> <option><i class="social-icon-soundcloud"></i> social-icon-soundcloud</option> <option><i class="social-icon-soundcloud-rectangle"></i> social-icon-soundcloud-rectangle</option> <option><i class="social-icon-dribbble"></i> social-icon-dribbble</option> <option><i class="social-icon-dribbble-round"></i> social-icon-dribbble-round</option> <option><i class="social-icon-dribbble-rectangle"></i> social-icon-dribbble-rectangle</option> <option><i class="social-icon-foptionckr"></i> social-icon-foptionckr</option> <option><i class="social-icon-foptionckr-round"></i> social-icon-foptionckr-round</option> <option><i class="social-icon-foptionckr-rectangle"></i> social-icon-foptionckr-rectangle</option> <option><i class="social-icon-html5-full"></i> social-icon-html5-full</option> <option><i class="social-icon-html5"></i> social-icon-html5</option> <option><i class="social-icon-css3"></i> social-icon-css3</option> <option><i class="social-icon-chrome"></i> social-icon-chrome</option> <option><i class="social-icon-firefox"></i> social-icon-firefox</option> <option><i class="social-icon-ie"></i> social-icon-ie</option> <option><i class="social-icon-opera"></i> social-icon-opera</option>  <option><i class="social-icon-safari"></i> social-icon-safari</option> <option><i class="social-icon-facebook-rectangle"></i> social-icon-facebook-rectangle</option> <option><i class="social-icon-facebook"></i> social-icon-facebook</option> <option><i class="social-icon-facebook-round"></i> social-icon-facebook-round</option> <option><i class="social-icon-twitter"></i> social-icon-twitter</option> <option><i class="social-icon-twitter-rectangle"></i> social-icon-twitter-rectangle</option> <option><i class="social-icon-twitter-round"></i> social-icon-twitter-round</option> <option><i class="social-icon-rss"></i> social-icon-rss</option> <option><i class="social-icon-rss-rectangle"></i> social-icon-rss-rectangle</option> <option><i class="social-icon-rss-round"></i> social-icon-rss-round</option> <option><i class="social-icon-google"></i> social-icon-google</option> <option><i class="social-icon-googleplus"></i> social-icon-googleplus</option> <option><i class="social-icon-google-drive"></i> social-icon-google-drive</option> <option><i class="social-icon-googleplus-tabs"></i> social-icon-googleplus-tabs</option> <option><i class="social-icon-googleplus-rectangle"></i> social-icon-googleplus-rectangle</option> <option><i class="social-icon-googleplus-round"></i> social-icon-googleplus-round</option> <option><i class="social-icon-word"></i> social-icon-word</option> <option><i class="social-icon-excel"></i> social-icon-excel</option> <option><i class="social-icon-pdf"></i> social-icon-pdf</option>  <option><i class="social-icon-joomla"></i> social-icon-joomla</option> <option><i class="social-icon-wordpress"></i> social-icon-wordpress</option> <option><i class="social-icon-wordpress-rectangle"></i> social-icon-wordpress-rectangle</option> <option><i class="social-icon-deoptioncious"></i> social-icon-deoptioncious</option> <option><i class="social-icon-deoptioncious-round"></i> social-icon-deoptioncious-round</option> <option><i class="social-icon-deoptioncious-rectangle"></i> social-icon-deoptioncious-rectangle</option> <option><i class="social-icon-picasa"></i> social-icon-picasa</option> <option><i class="social-icon-picasa-rectangle"></i> social-icon-picasa-rectangle</option> <option><i class="social-icon-pinterest"></i> social-icon-pinterest</option> <option><i class="social-icon-pinterest-round"></i> social-icon-pinterest-round</option> <option><i class="social-icon-pinterest-rectangle"></i> social-icon-pinterest-rectangle</option> <option><i class="social-icon-stumbleupon"></i> social-icon-stumbleupon</option> <option><i class="social-icon-stumbleupon-round"></i> social-icon-stumbleupon-round</option> <option><i class="social-icon-stumbleupon-rectangle"></i> social-icon-stumbleupon-rectangle</option> <option><i class="social-icon-linkedin"></i> social-icon-linkedin</option> <option><i class="social-icon-linkedin-round"></i> social-icon-linkedin-round</option> <option><i class="social-icon-linkedin-rectangle"></i> social-icon-linkedin-rectangle</option> <option><i class="social-icon-lastfm"></i> social-icon-lastfm</option> <option><i class="social-icon-lastfm-rectangle"></i> social-icon-lastfm-rectangle</option>  <option><i class="social-icon-forrst"></i> social-icon-forrst</option> <option><i class="social-icon-forrst-rectangle"></i> social-icon-forrst-rectangle</option> <option><i class="social-icon-deviantart"></i> social-icon-deviantart</option> <option><i class="social-icon-deviantart-round"></i> social-icon-deviantart-round</option> <option><i class="social-icon-deviantart-rectangle"></i> social-icon-deviantart-rectangle</option> <option><i class="social-icon-youtube-full"></i> social-icon-youtube-full</option> <option><i class="social-icon-youtube"></i> social-icon-youtube</option> <option><i class="social-icon-vimeo"></i> social-icon-vimeo</option> <option><i class="social-icon-vimeo-rectangle"></i> social-icon-vimeo-rectangle</option> <option><i class="social-icon-skype"></i> social-icon-skype</option> <option><i class="social-icon-xing-rectangle"></i> social-icon-xing-rectangle</option> <option><i class="social-icon-xing-round"></i> social-icon-xing-round</option> <option><i class="social-icon-paypal"></i> social-icon-paypal</option> <option><i class="social-icon-github"></i> social-icon-github</option> <option><i class="social-icon-github-mascot"></i> social-icon-github-mascot</option> <option><i class="social-icon-github-rectangle"></i> social-icon-github-rectangle</option> <option><i class="social-icon-github-kitty"></i> social-icon-github-kitty</option> <option><i class="social-icon-tumblr"></i> social-icon-tumblr</option> <option><i class="social-icon-tumblr-rectangle"></i> social-icon-tumblr-rectangle</option> <option><i class="social-icon-yahoo"></i> social-icon-yahoo</option> <option><i class="social-icon-yahoo-rectangle"></i> social-icon-yahoo-rectangle</option> </select><br> \
						</div>\
						<div>\
							<strong>Link '+(i+1)+' URL</strong><br> <input class="url" type="text" id="link-url-'+i+'" value="#" onclick="this.select()" /><br>\
						</div>\
					</div>';
				btnedit = '<div class="group" style=" max-width: 96.2%">\
						<div>\
							<strong>Button Text</strong><br> <input id="dropdown-text" type="text" value="Button Text" /><br>\
						</div>\
						<div>\
							<strong>Button Size</strong><br> <input type="radio" name="dropdown-size" value="Mini"> Mini <input type="radio" name="dropdown-size" value="Small"> Small <input type="radio" name="dropdown-size" value="Normal" checked="checked"> Normal <input type="radio" name="dropdown-size" value="Large"> Large<br>\
						</div>\
						<div>\
							<strong>Button Icon</strong><br> \
							<select id="dropdown-icon">\
								<option selected="selected">none</option> <option><i class="icon-adjust"></i> icon-adjust</option> <option><i class="icon-asterisk"></i> icon-asterisk</option> <option><i class="icon-ban-circle"></i> icon-ban-circle</option> <option><i class="icon-bar-chart"></i> icon-bar-chart</option> <option><i class="icon-barcode"></i> icon-barcode</option> <option><i class="icon-beaker"></i> icon-beaker</option> <option><i class="icon-beer"></i> icon-beer</option> <option><i class="icon-bell"></i> icon-bell</option> <option><i class="icon-bell-alt"></i> icon-bell-alt</option> <option><i class="icon-bolt"></i> icon-bolt</option> <option><i class="icon-book"></i> icon-book</option> <option><i class="icon-bookmark"></i> icon-bookmark</option> <option><i class="icon-bookmark-empty"></i> icon-bookmark-empty</option> <option><i class="icon-briefcase"></i> icon-briefcase</option> <option><i class="icon-bullhorn"></i> icon-bullhorn</option> <option><i class="icon-calendar"></i> icon-calendar</option> <option><i class="icon-camera"></i> icon-camera</option> <option><i class="icon-camera-retro"></i> icon-camera-retro</option> <option><i class="icon-certificate"></i> icon-certificate</option> <option><i class="icon-check"></i> icon-check</option> <option><i class="icon-check-empty"></i> icon-check-empty</option> <option><i class="icon-circle"></i> icon-circle</option> <option><i class="icon-circle-blank"></i> icon-circle-blank</option> <option><i class="icon-cloud"></i> icon-cloud</option> <option><i class="icon-cloud-download"></i> icon-cloud-download</option> <option><i class="icon-cloud-upload"></i> icon-cloud-upload</option> <option><i class="icon-coffee"></i> icon-coffee</option> <option><i class="icon-cog"></i> icon-cog</option> <option><i class="icon-cogs"></i> icon-cogs</option> <option><i class="icon-comment"></i> icon-comment</option> <option><i class="icon-comment-alt"></i> icon-comment-alt</option> <option><i class="icon-comments"></i> icon-comments</option> <option><i class="icon-comments-alt"></i> icon-comments-alt</option> <option><i class="icon-credit-card"></i> icon-credit-card</option> <option><i class="icon-dashboard"></i> icon-dashboard</option> <option><i class="icon-desktop"></i> icon-desktop</option> <option><i class="icon-download"></i> icon-download</option> <option><i class="icon-download-alt"></i> icon-download-alt</option>  <option><i class="icon-edit"></i> icon-edit</option> <option><i class="icon-envelope"></i> icon-envelope</option> <option><i class="icon-envelope-alt"></i> icon-envelope-alt</option> <option><i class="icon-exchange"></i> icon-exchange</option> <option><i class="icon-exclamation-sign"></i> icon-exclamation-sign</option> <option><i class="icon-external-link"></i> icon-external-link</option> <option><i class="icon-eye-close"></i> icon-eye-close</option> <option><i class="icon-eye-open"></i> icon-eye-open</option> <option><i class="icon-facetime-video"></i> icon-facetime-video</option> <option><i class="icon-fighter-jet"></i> icon-fighter-jet</option> <option><i class="icon-film"></i> icon-film</option> <option><i class="icon-filter"></i> icon-filter</option> <option><i class="icon-fire"></i> icon-fire</option> <option><i class="icon-flag"></i> icon-flag</option> <option><i class="icon-folder-close"></i> icon-folder-close</option> <option><i class="icon-folder-open"></i> icon-folder-open</option> <option><i class="icon-folder-close-alt"></i> icon-folder-close-alt</option> <option><i class="icon-folder-open-alt"></i> icon-folder-open-alt</option> <option><i class="icon-food"></i> icon-food</option> <option><i class="icon-gift"></i> icon-gift</option> <option><i class="icon-glass"></i> icon-glass</option> <option><i class="icon-globe"></i> icon-globe</option> <option><i class="icon-group"></i> icon-group</option> <option><i class="icon-hdd"></i> icon-hdd</option> <option><i class="icon-headphones"></i> icon-headphones</option> <option><i class="icon-heart"></i> icon-heart</option> <option><i class="icon-heart-empty"></i> icon-heart-empty</option> <option><i class="icon-home"></i> icon-home</option> <option><i class="icon-inbox"></i> icon-inbox</option> <option><i class="icon-info-sign"></i> icon-info-sign</option> <option><i class="icon-key"></i> icon-key</option> <option><i class="icon-leaf"></i> icon-leaf</option> <option><i class="icon-laptop"></i> icon-laptop</option> <option><i class="icon-legal"></i> icon-legal</option> <option><i class="icon-lemon"></i> icon-lemon</option> <option><i class="icon-lightbulb"></i> icon-lightbulb</option> <option><i class="icon-lock"></i> icon-lock</option> <option><i class="icon-unlock"></i> icon-unlock</option>  <option><i class="icon-magic"></i> icon-magic</option> <option><i class="icon-magnet"></i> icon-magnet</option> <option><i class="icon-map-marker"></i> icon-map-marker</option> <option><i class="icon-minus"></i> icon-minus</option> <option><i class="icon-minus-sign"></i> icon-minus-sign</option> <option><i class="icon-mobile-phone"></i> icon-mobile-phone</option> <option><i class="icon-money"></i> icon-money</option> <option><i class="icon-move"></i> icon-move</option> <option><i class="icon-music"></i> icon-music</option> <option><i class="icon-off"></i> icon-off</option> <option><i class="icon-ok"></i> icon-ok</option> <option><i class="icon-ok-circle"></i> icon-ok-circle</option> <option><i class="icon-ok-sign"></i> icon-ok-sign</option> <option><i class="icon-pencil"></i> icon-pencil</option> <option><i class="icon-picture"></i> icon-picture</option> <option><i class="icon-plane"></i> icon-plane</option> <option><i class="icon-plus"></i> icon-plus</option> <option><i class="icon-plus-sign"></i> icon-plus-sign</option> <option><i class="icon-print"></i> icon-print</option> <option><i class="icon-pushpin"></i> icon-pushpin</option> <option><i class="icon-qrcode"></i> icon-qrcode</option> <option><i class="icon-question-sign"></i> icon-question-sign</option> <option><i class="icon-quote-left"></i> icon-quote-left</option> <option><i class="icon-quote-right"></i> icon-quote-right</option> <option><i class="icon-random"></i> icon-random</option> <option><i class="icon-refresh icon-spin"></i> icon-refresh icon-spin</option> <option><i class="icon-remove"></i> icon-remove</option> <option><i class="icon-remove-circle"></i> icon-remove-circle</option> <option><i class="icon-remove-sign"></i> icon-remove-sign</option> <option><i class="icon-reorder"></i> icon-reorder</option> <option><i class="icon-reply"></i> icon-reply</option> <option><i class="icon-resize-horizontal"></i> icon-resize-horizontal</option> <option><i class="icon-resize-vertical"></i> icon-resize-vertical</option> <option><i class="icon-retweet"></i> icon-retweet</option> <option><i class="icon-road"></i> icon-road</option> <option><i class="icon-rss"></i> icon-rss</option> <option><i class="icon-screenshot"></i> icon-screenshot</option> <option><i class="icon-search"></i> icon-search</option>  <option><i class="icon-share"></i> icon-share</option> <option><i class="icon-share-alt"></i> icon-share-alt</option> <option><i class="icon-shopping-cart"></i> icon-shopping-cart</option> <option><i class="icon-signal"></i> icon-signal</option> <option><i class="icon-signin"></i> icon-signin</option> <option><i class="icon-signout"></i> icon-signout</option> <option><i class="icon-sitemap"></i> icon-sitemap</option> <option><i class="icon-sort"></i> icon-sort</option> <option><i class="icon-sort-down"></i> icon-sort-down</option> <option><i class="icon-sort-up"></i> icon-sort-up</option> <option><i class="icon-spinner icon-spin"></i> icon-spinner icon-spin</option> <option><i class="icon-star"></i> icon-star</option> <option><i class="icon-star-empty"></i> icon-star-empty</option> <option><i class="icon-star-half"></i> icon-star-half</option> <option><i class="icon-tablet"></i> icon-tablet</option> <option><i class="icon-tag"></i> icon-tag</option> <option><i class="icon-tags"></i> icon-tags</option> <option><i class="icon-tasks"></i> icon-tasks</option> <option><i class="icon-thumbs-down"></i> icon-thumbs-down</option> <option><i class="icon-thumbs-up"></i> icon-thumbs-up</option> <option><i class="icon-time"></i> icon-time</option> <option><i class="icon-tint"></i> icon-tint</option> <option><i class="icon-trash"></i> icon-trash</option> <option><i class="icon-trophy"></i> icon-trophy</option> <option><i class="icon-truck"></i> icon-truck</option> <option><i class="icon-umbrella"></i> icon-umbrella</option> <option><i class="icon-upload"></i> icon-upload</option> <option><i class="icon-upload-alt"></i> icon-upload-alt</option> <option><i class="icon-user"></i> icon-user</option> <option><i class="icon-user-md"></i> icon-user-md</option> <option><i class="icon-volume-off"></i> icon-volume-off</option> <option><i class="icon-volume-down"></i> icon-volume-down</option> <option><i class="icon-volume-up"></i> icon-volume-up</option> <option><i class="icon-warning-sign"></i> icon-warning-sign</option> <option><i class="icon-wrench"></i> icon-wrench</option> <option><i class="icon-zoom-in"></i> icon-zoom-in</option> <option><i class="icon-zoom-out"></i> icon-zoom-out</option>  <option><i class="icon-file"></i> icon-file</option> <option><i class="icon-file-alt"></i> icon-file-alt</option> <option><i class="icon-cut"></i> icon-cut</option> <option><i class="icon-copy"></i> icon-copy</option> <option><i class="icon-paste"></i> icon-paste</option> <option><i class="icon-save"></i> icon-save</option> <option><i class="icon-undo"></i> icon-undo</option> <option><i class="icon-repeat"></i> icon-repeat</option>  <option><i class="icon-text-height"></i> icon-text-height</option> <option><i class="icon-text-width"></i> icon-text-width</option> <option><i class="icon-align-left"></i> icon-align-left</option> <option><i class="icon-align-center"></i> icon-align-center</option> <option><i class="icon-align-right"></i> icon-align-right</option> <option><i class="icon-align-justify"></i> icon-align-justify</option> <option><i class="icon-indent-left"></i> icon-indent-left</option> <option><i class="icon-indent-right"></i> icon-indent-right</option>  <option><i class="icon-font"></i> icon-font</option> <option><i class="icon-bold"></i> icon-bold</option> <option><i class="icon-italic"></i> icon-italic</option> <option><i class="icon-strikethrough"></i> icon-strikethrough</option> <option><i class="icon-underline"></i> icon-underline</option> <option><i class="icon-link"></i> icon-link</option> <option><i class="icon-paper-clip"></i> icon-paper-clip</option> <option><i class="icon-columns"></i> icon-columns</option>  <option><i class="icon-table"></i> icon-table</option> <option><i class="icon-th-large"></i> icon-th-large</option> <option><i class="icon-th"></i> icon-th</option> <option><i class="icon-th-list"></i> icon-th-list</option> <option><i class="icon-list"></i> icon-list</option> <option><i class="icon-list-ol"></i> icon-list-ol</option> <option><i class="icon-list-ul"></i> icon-list-ul</option> <option><i class="icon-list-alt"></i> icon-list-alt</option>  <option><i class="icon-angle-left"></i> icon-angle-left</option> <option><i class="icon-angle-right"></i> icon-angle-right</option> <option><i class="icon-angle-up"></i> icon-angle-up</option> <option><i class="icon-angle-down"></i> icon-angle-down</option> <option><i class="icon-arrow-down"></i> icon-arrow-down</option> <option><i class="icon-arrow-left"></i> icon-arrow-left</option> <option><i class="icon-arrow-right"></i> icon-arrow-right</option> <option><i class="icon-arrow-up"></i> icon-arrow-up</option>  <option><i class="icon-caret-down"></i> icon-caret-down</option> <option><i class="icon-caret-left"></i> icon-caret-left</option> <option><i class="icon-caret-right"></i> icon-caret-right</option> <option><i class="icon-caret-up"></i> icon-caret-up</option> <option><i class="icon-chevron-down"></i> icon-chevron-down</option> <option><i class="icon-chevron-left"></i> icon-chevron-left</option> <option><i class="icon-chevron-right"></i> icon-chevron-right</option> <option><i class="icon-chevron-up"></i> icon-chevron-up</option>  <option><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</option> <option><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</option> <option><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</option> <option><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</option> <option><i class="icon-double-angle-left"></i> icon-double-angle-left</option> <option><i class="icon-double-angle-right"></i> icon-double-angle-right</option> <option><i class="icon-double-angle-up"></i> icon-double-angle-up</option> <option><i class="icon-double-angle-down"></i> icon-double-angle-down</option>  <option><i class="icon-hand-down"></i> icon-hand-down</option> <option><i class="icon-hand-left"></i> icon-hand-left</option> <option><i class="icon-hand-right"></i> icon-hand-right</option> <option><i class="icon-hand-up"></i> icon-hand-up</option> <option><i class="icon-circle"></i> icon-circle</option> <option><i class="icon-circle-blank"></i> icon-circle-blank</option>  <option><i class="icon-play-circle"></i> icon-play-circle</option> <option><i class="icon-play"></i> icon-play</option> <option><i class="icon-pause"></i> icon-pause</option> <option><i class="icon-stop"></i> icon-stop</option>  <option><i class="icon-step-backward"></i> icon-step-backward</option> <option><i class="icon-fast-backward"></i> icon-fast-backward</option> <option><i class="icon-backward"></i> icon-backward</option> <option><i class="icon-forward"></i> icon-forward</option>  <option><i class="icon-fast-forward"></i> icon-fast-forward</option> <option><i class="icon-step-forward"></i> icon-step-forward</option> <option><i class="icon-eject"></i> icon-eject</option>  <option><i class="icon-fullscreen"></i> icon-fullscreen</option> <option><i class="icon-resize-full"></i> icon-resize-full</option> <option><i class="icon-resize-small"></i> icon-resize-small</option>  <option><i class="icon-ambulance"></i> icon-ambulance</option> <option><i class="icon-beaker"></i> icon-beaker</option> <option><i class="icon-h-sign"></i> icon-h-sign</option> <option><i class="icon-hospital"></i> icon-hospital</option>  <option><i class="icon-medkit"></i> icon-medkit</option> <option><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</option>  <option><i class="icon-stethoscope"></i> icon-stethoscope</option> <option><i class="icon-user-md"></i> icon-user-md</option> <option><i class="social-icon-apple"></i> social-icon-apple</option> <option><i class="social-icon-mac"></i> social-icon-mac</option> <option><i class="social-icon-android"></i> social-icon-android</option> <option><i class="social-icon-windows"></i> social-icon-windows</option> <option><i class="social-icon-soundcloud"></i> social-icon-soundcloud</option> <option><i class="social-icon-soundcloud-rectangle"></i> social-icon-soundcloud-rectangle</option> <option><i class="social-icon-dribbble"></i> social-icon-dribbble</option> <option><i class="social-icon-dribbble-round"></i> social-icon-dribbble-round</option> <option><i class="social-icon-dribbble-rectangle"></i> social-icon-dribbble-rectangle</option> <option><i class="social-icon-foptionckr"></i> social-icon-foptionckr</option> <option><i class="social-icon-foptionckr-round"></i> social-icon-foptionckr-round</option> <option><i class="social-icon-foptionckr-rectangle"></i> social-icon-foptionckr-rectangle</option> <option><i class="social-icon-html5-full"></i> social-icon-html5-full</option> <option><i class="social-icon-html5"></i> social-icon-html5</option> <option><i class="social-icon-css3"></i> social-icon-css3</option> <option><i class="social-icon-chrome"></i> social-icon-chrome</option> <option><i class="social-icon-firefox"></i> social-icon-firefox</option> <option><i class="social-icon-ie"></i> social-icon-ie</option> <option><i class="social-icon-opera"></i> social-icon-opera</option>  <option><i class="social-icon-safari"></i> social-icon-safari</option> <option><i class="social-icon-facebook-rectangle"></i> social-icon-facebook-rectangle</option> <option><i class="social-icon-facebook"></i> social-icon-facebook</option> <option><i class="social-icon-facebook-round"></i> social-icon-facebook-round</option> <option><i class="social-icon-twitter"></i> social-icon-twitter</option> <option><i class="social-icon-twitter-rectangle"></i> social-icon-twitter-rectangle</option> <option><i class="social-icon-twitter-round"></i> social-icon-twitter-round</option> <option><i class="social-icon-rss"></i> social-icon-rss</option> <option><i class="social-icon-rss-rectangle"></i> social-icon-rss-rectangle</option> <option><i class="social-icon-rss-round"></i> social-icon-rss-round</option> <option><i class="social-icon-google"></i> social-icon-google</option> <option><i class="social-icon-googleplus"></i> social-icon-googleplus</option> <option><i class="social-icon-google-drive"></i> social-icon-google-drive</option> <option><i class="social-icon-googleplus-tabs"></i> social-icon-googleplus-tabs</option> <option><i class="social-icon-googleplus-rectangle"></i> social-icon-googleplus-rectangle</option> <option><i class="social-icon-googleplus-round"></i> social-icon-googleplus-round</option> <option><i class="social-icon-word"></i> social-icon-word</option> <option><i class="social-icon-excel"></i> social-icon-excel</option> <option><i class="social-icon-pdf"></i> social-icon-pdf</option>  <option><i class="social-icon-joomla"></i> social-icon-joomla</option> <option><i class="social-icon-wordpress"></i> social-icon-wordpress</option> <option><i class="social-icon-wordpress-rectangle"></i> social-icon-wordpress-rectangle</option> <option><i class="social-icon-deoptioncious"></i> social-icon-deoptioncious</option> <option><i class="social-icon-deoptioncious-round"></i> social-icon-deoptioncious-round</option> <option><i class="social-icon-deoptioncious-rectangle"></i> social-icon-deoptioncious-rectangle</option> <option><i class="social-icon-picasa"></i> social-icon-picasa</option> <option><i class="social-icon-picasa-rectangle"></i> social-icon-picasa-rectangle</option> <option><i class="social-icon-pinterest"></i> social-icon-pinterest</option> <option><i class="social-icon-pinterest-round"></i> social-icon-pinterest-round</option> <option><i class="social-icon-pinterest-rectangle"></i> social-icon-pinterest-rectangle</option> <option><i class="social-icon-stumbleupon"></i> social-icon-stumbleupon</option> <option><i class="social-icon-stumbleupon-round"></i> social-icon-stumbleupon-round</option> <option><i class="social-icon-stumbleupon-rectangle"></i> social-icon-stumbleupon-rectangle</option> <option><i class="social-icon-linkedin"></i> social-icon-linkedin</option> <option><i class="social-icon-linkedin-round"></i> social-icon-linkedin-round</option> <option><i class="social-icon-linkedin-rectangle"></i> social-icon-linkedin-rectangle</option> <option><i class="social-icon-lastfm"></i> social-icon-lastfm</option> <option><i class="social-icon-lastfm-rectangle"></i> social-icon-lastfm-rectangle</option>  <option><i class="social-icon-forrst"></i> social-icon-forrst</option> <option><i class="social-icon-forrst-rectangle"></i> social-icon-forrst-rectangle</option> <option><i class="social-icon-deviantart"></i> social-icon-deviantart</option> <option><i class="social-icon-deviantart-round"></i> social-icon-deviantart-round</option> <option><i class="social-icon-deviantart-rectangle"></i> social-icon-deviantart-rectangle</option> <option><i class="social-icon-youtube-full"></i> social-icon-youtube-full</option> <option><i class="social-icon-youtube"></i> social-icon-youtube</option> <option><i class="social-icon-vimeo"></i> social-icon-vimeo</option> <option><i class="social-icon-vimeo-rectangle"></i> social-icon-vimeo-rectangle</option> <option><i class="social-icon-skype"></i> social-icon-skype</option> <option><i class="social-icon-xing-rectangle"></i> social-icon-xing-rectangle</option> <option><i class="social-icon-xing-round"></i> social-icon-xing-round</option> <option><i class="social-icon-paypal"></i> social-icon-paypal</option> <option><i class="social-icon-github"></i> social-icon-github</option> <option><i class="social-icon-github-mascot"></i> social-icon-github-mascot</option> <option><i class="social-icon-github-rectangle"></i> social-icon-github-rectangle</option> <option><i class="social-icon-github-kitty"></i> social-icon-github-kitty</option> <option><i class="social-icon-tumblr"></i> social-icon-tumblr</option> <option><i class="social-icon-tumblr-rectangle"></i> social-icon-tumblr-rectangle</option> <option><i class="social-icon-yahoo"></i> social-icon-yahoo</option> <option><i class="social-icon-yahoo-rectangle"></i> social-icon-yahoo-rectangle</option> \
							</select><br> \
						</div>\
						<div>\
							<strong>Button Color</strong><br> <input type="radio" name="dropdown-color" value="Default" checked="checked"> Default <input type="radio" name="dropdown-color" value="Primary"> Primary <input type="radio" name="dropdown-color" value="Info"> Info <input type="radio" name="dropdown-color" value="Success">\ Success<br> <input type="radio" name="dropdown-color" value="Warning"> Warning <input type="radio" name="dropdown-color" value="Danger"> Danger <input type="radio" name="dropdown-color" value="Inverse"> Inverse <input type="radio" name="dropdown-color" value="Link"> Link\
						</div>\
						<div>\
							<strong>Button URL</strong><br> <input class="url" type="text" id="dropdown-url" value="#" onclick="this.select()" /><br>\
						</div>\
					</div>';
			};
			$('<div class="btn-group"> <a class="btn" href="#">Button</a> <a class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </a> <ul class="dropdown-menu"> </ul> </div>').appendTo('#button-body #demo_button');
			$(btnedit).appendTo('#demo_code');
			$(itemedit).appendTo('#demo_code');
			$(item).appendTo('#demo_button .btn-group .dropdown-menu');
		};
		
		// dropdown preview
		$('#demo_code .group input:radio[name=dropdown-size]').live('click', function(){
			var size = $('#button-body #demo_code .group').find('input:radio[name=dropdown-size]:checked').val();
			var type = $('#button-body #demo_code .group').find('input:radio[name=dropdown-color]:checked').val();
			$('#button-body #demo_button .btn-group > a.btn:first').removeClass().addClass('btn btn-'+type.toLowerCase()+' btn-'+size.toLowerCase());
			$('#button-body #demo_button .btn-group > a.btn:last').removeClass().addClass('btn btn-'+type.toLowerCase()+' btn-'+size.toLowerCase() + ' dropdown-toggle');
			$('#button-body #demo_button .btn-group button').removeClass().addClass('btn btn-'+type.toLowerCase()+' btn-'+size.toLowerCase() + ' dropdown-toggle');
		});
		$('#button-body #demo_code .group input:radio[name=dropdown-color]').live('click', function(){
			var size = $('#button-body #demo_code .group').find('input:radio[name=dropdown-size]:checked').val();
			var type = $('#button-body #demo_code .group').find('input:radio[name=dropdown-color]:checked').val();
			$('#button-body #demo_button .btn-group > a.btn:first').removeClass().addClass('btn btn-'+type.toLowerCase()+' btn-'+size.toLowerCase());
			$('#button-body #demo_button .btn-group > a.btn:last').removeClass().addClass('btn btn-'+type.toLowerCase()+' btn-'+size.toLowerCase() + ' dropdown-toggle');
			$('#button-body #demo_button .btn-group button').removeClass().addClass('btn btn-'+type.toLowerCase()+' btn-'+size.toLowerCase() + ' dropdown-toggle');
		});
		
		$('#demo_code .group select[id=dropdown-icon]').live('click', function(){
			var icon = $('#button-body #demo_code .group').find('select[id=dropdown-icon]').val();
			var text = $('#button-body #demo_code .group').find('input[id=dropdown-text]').val();
			$('#button-body #demo_button .btn-group button i').attr('class',icon);
			$('#button-body #demo_button .btn-group > a i').attr('class',icon);
			$('#button-body #demo_button .btn-group > .btn:first').html('<i class="'+icon+'"></i> '+text);
		});
		$('#demo_code .group input:text[id=dropdown-text]').live('keyup change', function(){
			var text = $('#button-body #demo_code .group').find('input[id=dropdown-text]').val();
			var icon = $('#button-body #demo_code .group').find('select[id=dropdown-icon]').val();
			//
			$('#button-body #demo_button .btn-group > a:first').html('<i class="'+icon+'"></i> '+text);
			$('#button-body #demo_button .btn-group button').html('<i class="'+icon+'"></i> '+text+' <span class="caret"></span>');
		});
		
		$('#demo_code .group input:text[id=dropdown-url]').live('keyup change', function(){
			var link = $('#button-body #demo_code .group').find('input[id=dropdown-url]').val();
			$('#button-body #demo_button .btn-group > a:first').attr('href',link);
		});
		
		// dropdown item preview
		$('#demo_code .item select.icon').live('change',function() {
			var idx = $(this).attr('id').replace('link-icon-','');
			var icon = $(this).val();
			$('#demo_button .dropdown-menu a:eq('+idx+') i').attr('class',icon);
		});

		$('#demo_code .item > div > input.text').live('keyup change', function() {
			var idx = $(this).attr('id').replace('link-text-','');
			var icon = $(this).parents('.item').find('select').val();
			var text = $(this).val();
			$('#demo_button .btn-group .dropdown-menu a:eq('+idx+')').html('<i class="'+icon+'"></i> '+text);
		});
		
		$('#demo_code .item > div > input.url').live('keyup change', function() {
			var idx = $(this).attr('id').replace('link-url-','');
			var url = $(this).val();
			$('#demo_button .btn-group .dropdown-menu a:eq('+idx+')').attr('href',url);
		});
		
		
		$('#btn_insert').click(function(){
			if ($('#button-group option:selected').val() == 'none') {
				var icon = $('#button-body').find('select[id=button-icon] option:selected').text();
				var text = $('#button-body').find('input:text[name=text]').val();
				var size = $('#button-body').find('input:radio[name=size]:checked').val();
				var type = $('#button-body').find('input:radio[name=type]:checked').val();
				var link = $('#button-body').find('input[name=link]').val();
				parent.tinymce.activeEditor.execCommand('mceInsertContent',false,'[button icon="'+icon+'" size="'+size.toLowerCase()+'" type="'+type.toLowerCase()+'" value=" '+text+' " href="'+link+'"]<br class="nc"/>');
				parent.tb_remove();
				
			} else if ($('#button-group option:selected').val() == 'btn-group') {
				
				var shortcode = '[group]<br class="nc"/>';
				$('#demo_button .btn-group a').each(function(){
					//var idx = $('#demo_code').find('.item').attr('id').replace('button-','');
					var text = $(this).text(); 
					var link = $(this).attr('href');
					var icon = $(this).find('i').attr('class');
					var type = $('#demo_code').find('input:radio[name=type]:checked').val();
					var size = $('#demo_code').find('input:radio[name=size]:checked').val();
					shortcode+= '[button icon="'+icon+'" size="'+size.toLowerCase()+'" type="'+type.toLowerCase()+'" value=" '+text+'" href="'+link+'"]<br class="nc"/>';
				})
				shortcode+= '[/group]<br class="nc"/>';

				parent.tinymce.activeEditor.execCommand('mceInsertContent',false,shortcode);
				parent.tb_remove();
				
			} else if ($('#button-group option:selected').val() == 'dropdown-toggle') {
			
				var dropdowntype = $('#demo_code').find('input:radio[name=dropdown-color]:checked').val();
				var dropdownsize = $('#demo_code').find('input:radio[name=dropdown-size]:checked').val();
				var dropdowntext = $('#demo_code').find('input:text[id=dropdown-text]').val();
				var dropdownicon = $('#demo_code').find('select[id=dropdown-icon] option:selected').val();
				
				var shortcode = '[dropdown-button size="'+dropdownsize.toLowerCase()+'" type="'+dropdowntype.toLowerCase()+'" text="'+dropdowntext+'" icon="'+dropdownicon+'"]<br class="nc"/>';
				$('#demo_button .btn-group .dropdown-menu li a').each(function(){
					//var idx = $('#demo_code').find('.item').attr('id').replace('button-','');
					var text = $(this).text(); 
					var link = $(this).attr('href');
					var icon = $(this).find('i').attr('class');
					if (icon == 'none') {
						shortcode+= '[dropdown-link value=" '+text+'" href="'+link+'"]<br class="nc"/>';
					} else {	
						shortcode+= '[dropdown-link icon="'+icon+'" value=" '+text+'" href="'+link+'"]<br class="nc"/>';
					}
				})
				shortcode+= '[/dropdown-button]<br class="nc"/>';

				parent.tinymce.activeEditor.execCommand('mceInsertContent',false,shortcode);
				parent.tb_remove();
				
			} else if ($('#button-group option:selected').val() == 'dropdown-toggle-split') {
				var dropdowntype = $('#demo_code').find('input:radio[name=dropdown-color]:checked').val();
				var dropdownsize = $('#demo_code').find('input:radio[name=dropdown-size]:checked').val();
				var dropdowntext = $('#demo_code').find('input:text[id=dropdown-text]').val();
				var dropdownlink = $('#demo_code').find('input:text[id=dropdown-url]').val();
				var dropdownicon = $('#demo_code').find('select[id=dropdown-icon] option:selected').val();
				
				var shortcode = '[dropdown-split size="'+dropdownsize.toLowerCase()+'" type="'+dropdowntype.toLowerCase()+'" text="'+dropdowntext+'" link="'+dropdownlink+'" icon="'+dropdownicon+'"]<br class="nc"/>';
				$('#demo_button .btn-group .dropdown-menu li a').each(function(){
					//var idx = $('#demo_code').find('.item').attr('id').replace('button-','');
					var text = $(this).text(); 
					var link = $(this).attr('href');
					var icon = $(this).find('i').attr('class');
					if (icon == 'none') {
						shortcode+= '[dropdown-link value="'+text+'" href="'+link+'"]<br class="nc"/>';
					} else {	
						shortcode+= '[dropdown-link icon="'+icon+'" value=" '+text+'" href="'+link+'"]<br class="nc"/>';
					}
				})
				shortcode+= '[/dropdown-split]<br class="nc"/>';

				parent.tinymce.activeEditor.execCommand('mceInsertContent',false,shortcode);
				parent.tb_remove();
			} else if ($('#button-group option:selected').val() == 'btn-toolbar') {
				var shortcode = '[buttons-toolbar][/buttons-toolbar]<br class="nc"/>';
				parent.tinymce.activeEditor.execCommand('mceInsertContent',false,shortcode);
				parent.tb_remove();
			}
		});	
	});	
})(jQuery);


</script>	
</head>

<body style="padding:10px" id="button-body">

	<div id="button-type" style="float:left; width: 49%; margin-left:1%">
		<strong>Button Type</strong><br>
		<select id="button-group">
			<option value="none" selected="selected">Default</option>
			<option value="btn-group">Button Group</option>
			<option value="dropdown-toggle">Dropdown Button</option>
			<option value="dropdown-toggle-split">Dropdown Split Button</option>
			<option value="btn-toolbar">Button Toolbar</option>
		</select>
	</div>
	
	<form id="num-buttons" style="display: none; float:left; width: 49%; margin:0">
		<strong>Number of buttons in group</strong><br> 
		<input placeholder="How many buttons do you want?" required pattern="\b([1-9]|[1-9][0-9])\b" id="buttons-group" type="number" name="buttons-group" min="2" max="99">
	<br><br></form>
	
	<form id="num-links" style="display: none; float:left; width: 49%; margin:0">
		<strong>Number of dropdown links</strong><br> 
		<input placeholder="How many links do you want?" required pattern="\b([1-9]|[1-9][0-9])\b" id="button-dropdown" type="number" name="button-dropdown" min="1" max="99">
	<br><br></form>

	<form id="num-links-split" style="display: none; float:left; width: 49%; margin:0">
		<strong>Number of dropdown links</strong><br> 
		<input placeholder="How many links do you want?" required pattern="\b([1-9]|[1-9][0-9])\b" id="button-dropdown-split" type="number" name="button-dropdown-split" min="1" max="99">
	<br><br></form>
	
	<div id="button-color" style="float:left; width: 49%; margin-left:1%">
		<strong>Button Color</strong><br> 
		<input type="radio" name="type" value="Default" checked="checked"> Default
		<input type="radio" name="type" value="Primary"> Primary
		<input type="radio" name="type" value="Info"> Info
		<input type="radio" name="type" value="Success"> Success<br>
		<input type="radio" name="type" value="Warning"> Warning
		<input type="radio" name="type" value="Danger"> Danger
		<input type="radio" name="type" value="Inverse"> Inverse
		<input type="radio" name="type" value="Link"> Link
	<br><br></div>
	
	<div id="button-size" style="float:left; width: 49%; margin-left:1%">
		<strong>Button Size:</strong><br>
		<input type="radio" name="size" value="Mini"> Mini
		<input type="radio" name="size" value="Small"> Small
		<input type="radio" name="size" value="Normal" checked> Normal
		<input type="radio" name="size" value="Large"> Large
	<br><br></div>
	
	<div id="button-icon-div" style=" float:left; width: 49%; margin-left:1%">
		<strong>Button Icon:</strong><br>
		<select id="button-icon"> 
			<option selected="selected">none</option> <option><i class="icon-adjust"></i> icon-adjust</option> <option><i class="icon-asterisk"></i> icon-asterisk</option> <option><i class="icon-ban-circle"></i> icon-ban-circle</option> <option><i class="icon-bar-chart"></i> icon-bar-chart</option> <option><i class="icon-barcode"></i> icon-barcode</option> <option><i class="icon-beaker"></i> icon-beaker</option> <option><i class="icon-beer"></i> icon-beer</option> <option><i class="icon-bell"></i> icon-bell</option> <option><i class="icon-bell-alt"></i> icon-bell-alt</option> <option><i class="icon-bolt"></i> icon-bolt</option> <option><i class="icon-book"></i> icon-book</option> <option><i class="icon-bookmark"></i> icon-bookmark</option> <option><i class="icon-bookmark-empty"></i> icon-bookmark-empty</option> <option><i class="icon-briefcase"></i> icon-briefcase</option> <option><i class="icon-bullhorn"></i> icon-bullhorn</option> <option><i class="icon-calendar"></i> icon-calendar</option> <option><i class="icon-camera"></i> icon-camera</option> <option><i class="icon-camera-retro"></i> icon-camera-retro</option> <option><i class="icon-certificate"></i> icon-certificate</option> <option><i class="icon-check"></i> icon-check</option> <option><i class="icon-check-empty"></i> icon-check-empty</option> <option><i class="icon-circle"></i> icon-circle</option> <option><i class="icon-circle-blank"></i> icon-circle-blank</option> <option><i class="icon-cloud"></i> icon-cloud</option> <option><i class="icon-cloud-download"></i> icon-cloud-download</option> <option><i class="icon-cloud-upload"></i> icon-cloud-upload</option> <option><i class="icon-coffee"></i> icon-coffee</option> <option><i class="icon-cog"></i> icon-cog</option> <option><i class="icon-cogs"></i> icon-cogs</option> <option><i class="icon-comment"></i> icon-comment</option> <option><i class="icon-comment-alt"></i> icon-comment-alt</option> <option><i class="icon-comments"></i> icon-comments</option> <option><i class="icon-comments-alt"></i> icon-comments-alt</option> <option><i class="icon-credit-card"></i> icon-credit-card</option> <option><i class="icon-dashboard"></i> icon-dashboard</option> <option><i class="icon-desktop"></i> icon-desktop</option> <option><i class="icon-download"></i> icon-download</option> <option><i class="icon-download-alt"></i> icon-download-alt</option>  <option><i class="icon-edit"></i> icon-edit</option> <option><i class="icon-envelope"></i> icon-envelope</option> <option><i class="icon-envelope-alt"></i> icon-envelope-alt</option> <option><i class="icon-exchange"></i> icon-exchange</option> <option><i class="icon-exclamation-sign"></i> icon-exclamation-sign</option> <option><i class="icon-external-link"></i> icon-external-link</option> <option><i class="icon-eye-close"></i> icon-eye-close</option> <option><i class="icon-eye-open"></i> icon-eye-open</option> <option><i class="icon-facetime-video"></i> icon-facetime-video</option> <option><i class="icon-fighter-jet"></i> icon-fighter-jet</option> <option><i class="icon-film"></i> icon-film</option> <option><i class="icon-filter"></i> icon-filter</option> <option><i class="icon-fire"></i> icon-fire</option> <option><i class="icon-flag"></i> icon-flag</option> <option><i class="icon-folder-close"></i> icon-folder-close</option> <option><i class="icon-folder-open"></i> icon-folder-open</option> <option><i class="icon-folder-close-alt"></i> icon-folder-close-alt</option> <option><i class="icon-folder-open-alt"></i> icon-folder-open-alt</option> <option><i class="icon-food"></i> icon-food</option> <option><i class="icon-gift"></i> icon-gift</option> <option><i class="icon-glass"></i> icon-glass</option> <option><i class="icon-globe"></i> icon-globe</option> <option><i class="icon-group"></i> icon-group</option> <option><i class="icon-hdd"></i> icon-hdd</option> <option><i class="icon-headphones"></i> icon-headphones</option> <option><i class="icon-heart"></i> icon-heart</option> <option><i class="icon-heart-empty"></i> icon-heart-empty</option> <option><i class="icon-home"></i> icon-home</option> <option><i class="icon-inbox"></i> icon-inbox</option> <option><i class="icon-info-sign"></i> icon-info-sign</option> <option><i class="icon-key"></i> icon-key</option> <option><i class="icon-leaf"></i> icon-leaf</option> <option><i class="icon-laptop"></i> icon-laptop</option> <option><i class="icon-legal"></i> icon-legal</option> <option><i class="icon-lemon"></i> icon-lemon</option> <option><i class="icon-lightbulb"></i> icon-lightbulb</option> <option><i class="icon-lock"></i> icon-lock</option> <option><i class="icon-unlock"></i> icon-unlock</option>  <option><i class="icon-magic"></i> icon-magic</option> <option><i class="icon-magnet"></i> icon-magnet</option> <option><i class="icon-map-marker"></i> icon-map-marker</option> <option><i class="icon-minus"></i> icon-minus</option> <option><i class="icon-minus-sign"></i> icon-minus-sign</option> <option><i class="icon-mobile-phone"></i> icon-mobile-phone</option> <option><i class="icon-money"></i> icon-money</option> <option><i class="icon-move"></i> icon-move</option> <option><i class="icon-music"></i> icon-music</option> <option><i class="icon-off"></i> icon-off</option> <option><i class="icon-ok"></i> icon-ok</option> <option><i class="icon-ok-circle"></i> icon-ok-circle</option> <option><i class="icon-ok-sign"></i> icon-ok-sign</option> <option><i class="icon-pencil"></i> icon-pencil</option> <option><i class="icon-picture"></i> icon-picture</option> <option><i class="icon-plane"></i> icon-plane</option> <option><i class="icon-plus"></i> icon-plus</option> <option><i class="icon-plus-sign"></i> icon-plus-sign</option> <option><i class="icon-print"></i> icon-print</option> <option><i class="icon-pushpin"></i> icon-pushpin</option> <option><i class="icon-qrcode"></i> icon-qrcode</option> <option><i class="icon-question-sign"></i> icon-question-sign</option> <option><i class="icon-quote-left"></i> icon-quote-left</option> <option><i class="icon-quote-right"></i> icon-quote-right</option> <option><i class="icon-random"></i> icon-random</option> <option><i class="icon-refresh icon-spin"></i> icon-refresh icon-spin</option> <option><i class="icon-remove"></i> icon-remove</option> <option><i class="icon-remove-circle"></i> icon-remove-circle</option> <option><i class="icon-remove-sign"></i> icon-remove-sign</option> <option><i class="icon-reorder"></i> icon-reorder</option> <option><i class="icon-reply"></i> icon-reply</option> <option><i class="icon-resize-horizontal"></i> icon-resize-horizontal</option> <option><i class="icon-resize-vertical"></i> icon-resize-vertical</option> <option><i class="icon-retweet"></i> icon-retweet</option> <option><i class="icon-road"></i> icon-road</option> <option><i class="icon-rss"></i> icon-rss</option> <option><i class="icon-screenshot"></i> icon-screenshot</option> <option><i class="icon-search"></i> icon-search</option>  <option><i class="icon-share"></i> icon-share</option> <option><i class="icon-share-alt"></i> icon-share-alt</option> <option><i class="icon-shopping-cart"></i> icon-shopping-cart</option> <option><i class="icon-signal"></i> icon-signal</option> <option><i class="icon-signin"></i> icon-signin</option> <option><i class="icon-signout"></i> icon-signout</option> <option><i class="icon-sitemap"></i> icon-sitemap</option> <option><i class="icon-sort"></i> icon-sort</option> <option><i class="icon-sort-down"></i> icon-sort-down</option> <option><i class="icon-sort-up"></i> icon-sort-up</option> <option><i class="icon-spinner icon-spin"></i> icon-spinner icon-spin</option> <option><i class="icon-star"></i> icon-star</option> <option><i class="icon-star-empty"></i> icon-star-empty</option> <option><i class="icon-star-half"></i> icon-star-half</option> <option><i class="icon-tablet"></i> icon-tablet</option> <option><i class="icon-tag"></i> icon-tag</option> <option><i class="icon-tags"></i> icon-tags</option> <option><i class="icon-tasks"></i> icon-tasks</option> <option><i class="icon-thumbs-down"></i> icon-thumbs-down</option> <option><i class="icon-thumbs-up"></i> icon-thumbs-up</option> <option><i class="icon-time"></i> icon-time</option> <option><i class="icon-tint"></i> icon-tint</option> <option><i class="icon-trash"></i> icon-trash</option> <option><i class="icon-trophy"></i> icon-trophy</option> <option><i class="icon-truck"></i> icon-truck</option> <option><i class="icon-umbrella"></i> icon-umbrella</option> <option><i class="icon-upload"></i> icon-upload</option> <option><i class="icon-upload-alt"></i> icon-upload-alt</option> <option><i class="icon-user"></i> icon-user</option> <option><i class="icon-user-md"></i> icon-user-md</option> <option><i class="icon-volume-off"></i> icon-volume-off</option> <option><i class="icon-volume-down"></i> icon-volume-down</option> <option><i class="icon-volume-up"></i> icon-volume-up</option> <option><i class="icon-warning-sign"></i> icon-warning-sign</option> <option><i class="icon-wrench"></i> icon-wrench</option> <option><i class="icon-zoom-in"></i> icon-zoom-in</option> <option><i class="icon-zoom-out"></i> icon-zoom-out</option>  <option><i class="icon-file"></i> icon-file</option> <option><i class="icon-file-alt"></i> icon-file-alt</option> <option><i class="icon-cut"></i> icon-cut</option> <option><i class="icon-copy"></i> icon-copy</option> <option><i class="icon-paste"></i> icon-paste</option> <option><i class="icon-save"></i> icon-save</option> <option><i class="icon-undo"></i> icon-undo</option> <option><i class="icon-repeat"></i> icon-repeat</option>  <option><i class="icon-text-height"></i> icon-text-height</option> <option><i class="icon-text-width"></i> icon-text-width</option> <option><i class="icon-align-left"></i> icon-align-left</option> <option><i class="icon-align-center"></i> icon-align-center</option> <option><i class="icon-align-right"></i> icon-align-right</option> <option><i class="icon-align-justify"></i> icon-align-justify</option> <option><i class="icon-indent-left"></i> icon-indent-left</option> <option><i class="icon-indent-right"></i> icon-indent-right</option>  <option><i class="icon-font"></i> icon-font</option> <option><i class="icon-bold"></i> icon-bold</option> <option><i class="icon-italic"></i> icon-italic</option> <option><i class="icon-strikethrough"></i> icon-strikethrough</option> <option><i class="icon-underline"></i> icon-underline</option> <option><i class="icon-link"></i> icon-link</option> <option><i class="icon-paper-clip"></i> icon-paper-clip</option> <option><i class="icon-columns"></i> icon-columns</option>  <option><i class="icon-table"></i> icon-table</option> <option><i class="icon-th-large"></i> icon-th-large</option> <option><i class="icon-th"></i> icon-th</option> <option><i class="icon-th-list"></i> icon-th-list</option> <option><i class="icon-list"></i> icon-list</option> <option><i class="icon-list-ol"></i> icon-list-ol</option> <option><i class="icon-list-ul"></i> icon-list-ul</option> <option><i class="icon-list-alt"></i> icon-list-alt</option>  <option><i class="icon-angle-left"></i> icon-angle-left</option> <option><i class="icon-angle-right"></i> icon-angle-right</option> <option><i class="icon-angle-up"></i> icon-angle-up</option> <option><i class="icon-angle-down"></i> icon-angle-down</option> <option><i class="icon-arrow-down"></i> icon-arrow-down</option> <option><i class="icon-arrow-left"></i> icon-arrow-left</option> <option><i class="icon-arrow-right"></i> icon-arrow-right</option> <option><i class="icon-arrow-up"></i> icon-arrow-up</option>  <option><i class="icon-caret-down"></i> icon-caret-down</option> <option><i class="icon-caret-left"></i> icon-caret-left</option> <option><i class="icon-caret-right"></i> icon-caret-right</option> <option><i class="icon-caret-up"></i> icon-caret-up</option> <option><i class="icon-chevron-down"></i> icon-chevron-down</option> <option><i class="icon-chevron-left"></i> icon-chevron-left</option> <option><i class="icon-chevron-right"></i> icon-chevron-right</option> <option><i class="icon-chevron-up"></i> icon-chevron-up</option>  <option><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</option> <option><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</option> <option><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</option> <option><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</option> <option><i class="icon-double-angle-left"></i> icon-double-angle-left</option> <option><i class="icon-double-angle-right"></i> icon-double-angle-right</option> <option><i class="icon-double-angle-up"></i> icon-double-angle-up</option> <option><i class="icon-double-angle-down"></i> icon-double-angle-down</option>  <option><i class="icon-hand-down"></i> icon-hand-down</option> <option><i class="icon-hand-left"></i> icon-hand-left</option> <option><i class="icon-hand-right"></i> icon-hand-right</option> <option><i class="icon-hand-up"></i> icon-hand-up</option> <option><i class="icon-circle"></i> icon-circle</option> <option><i class="icon-circle-blank"></i> icon-circle-blank</option>  <option><i class="icon-play-circle"></i> icon-play-circle</option> <option><i class="icon-play"></i> icon-play</option> <option><i class="icon-pause"></i> icon-pause</option> <option><i class="icon-stop"></i> icon-stop</option>  <option><i class="icon-step-backward"></i> icon-step-backward</option> <option><i class="icon-fast-backward"></i> icon-fast-backward</option> <option><i class="icon-backward"></i> icon-backward</option> <option><i class="icon-forward"></i> icon-forward</option>  <option><i class="icon-fast-forward"></i> icon-fast-forward</option> <option><i class="icon-step-forward"></i> icon-step-forward</option> <option><i class="icon-eject"></i> icon-eject</option>  <option><i class="icon-fullscreen"></i> icon-fullscreen</option> <option><i class="icon-resize-full"></i> icon-resize-full</option> <option><i class="icon-resize-small"></i> icon-resize-small</option>  <option><i class="icon-ambulance"></i> icon-ambulance</option> <option><i class="icon-beaker"></i> icon-beaker</option> <option><i class="icon-h-sign"></i> icon-h-sign</option> <option><i class="icon-hospital"></i> icon-hospital</option>  <option><i class="icon-medkit"></i> icon-medkit</option> <option><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</option>  <option><i class="icon-stethoscope"></i> icon-stethoscope</option> <option><i class="icon-user-md"></i> icon-user-md</option> <option><i class="social-icon-apple"></i> social-icon-apple</option> <option><i class="social-icon-mac"></i> social-icon-mac</option> <option><i class="social-icon-android"></i> social-icon-android</option> <option><i class="social-icon-windows"></i> social-icon-windows</option> <option><i class="social-icon-soundcloud"></i> social-icon-soundcloud</option> <option><i class="social-icon-soundcloud-rectangle"></i> social-icon-soundcloud-rectangle</option> <option><i class="social-icon-dribbble"></i> social-icon-dribbble</option> <option><i class="social-icon-dribbble-round"></i> social-icon-dribbble-round</option> <option><i class="social-icon-dribbble-rectangle"></i> social-icon-dribbble-rectangle</option> <option><i class="social-icon-foptionckr"></i> social-icon-foptionckr</option> <option><i class="social-icon-foptionckr-round"></i> social-icon-foptionckr-round</option> <option><i class="social-icon-foptionckr-rectangle"></i> social-icon-foptionckr-rectangle</option> <option><i class="social-icon-html5-full"></i> social-icon-html5-full</option> <option><i class="social-icon-html5"></i> social-icon-html5</option> <option><i class="social-icon-css3"></i> social-icon-css3</option> <option><i class="social-icon-chrome"></i> social-icon-chrome</option> <option><i class="social-icon-firefox"></i> social-icon-firefox</option> <option><i class="social-icon-ie"></i> social-icon-ie</option> <option><i class="social-icon-opera"></i> social-icon-opera</option>  <option><i class="social-icon-safari"></i> social-icon-safari</option> <option><i class="social-icon-facebook-rectangle"></i> social-icon-facebook-rectangle</option> <option><i class="social-icon-facebook"></i> social-icon-facebook</option> <option><i class="social-icon-facebook-round"></i> social-icon-facebook-round</option> <option><i class="social-icon-twitter"></i> social-icon-twitter</option> <option><i class="social-icon-twitter-rectangle"></i> social-icon-twitter-rectangle</option> <option><i class="social-icon-twitter-round"></i> social-icon-twitter-round</option> <option><i class="social-icon-rss"></i> social-icon-rss</option> <option><i class="social-icon-rss-rectangle"></i> social-icon-rss-rectangle</option> <option><i class="social-icon-rss-round"></i> social-icon-rss-round</option> <option><i class="social-icon-google"></i> social-icon-google</option> <option><i class="social-icon-googleplus"></i> social-icon-googleplus</option> <option><i class="social-icon-google-drive"></i> social-icon-google-drive</option> <option><i class="social-icon-googleplus-tabs"></i> social-icon-googleplus-tabs</option> <option><i class="social-icon-googleplus-rectangle"></i> social-icon-googleplus-rectangle</option> <option><i class="social-icon-googleplus-round"></i> social-icon-googleplus-round</option> <option><i class="social-icon-word"></i> social-icon-word</option> <option><i class="social-icon-excel"></i> social-icon-excel</option> <option><i class="social-icon-pdf"></i> social-icon-pdf</option>  <option><i class="social-icon-joomla"></i> social-icon-joomla</option> <option><i class="social-icon-wordpress"></i> social-icon-wordpress</option> <option><i class="social-icon-wordpress-rectangle"></i> social-icon-wordpress-rectangle</option> <option><i class="social-icon-deoptioncious"></i> social-icon-deoptioncious</option> <option><i class="social-icon-deoptioncious-round"></i> social-icon-deoptioncious-round</option> <option><i class="social-icon-deoptioncious-rectangle"></i> social-icon-deoptioncious-rectangle</option> <option><i class="social-icon-picasa"></i> social-icon-picasa</option> <option><i class="social-icon-picasa-rectangle"></i> social-icon-picasa-rectangle</option> <option><i class="social-icon-pinterest"></i> social-icon-pinterest</option> <option><i class="social-icon-pinterest-round"></i> social-icon-pinterest-round</option> <option><i class="social-icon-pinterest-rectangle"></i> social-icon-pinterest-rectangle</option> <option><i class="social-icon-stumbleupon"></i> social-icon-stumbleupon</option> <option><i class="social-icon-stumbleupon-round"></i> social-icon-stumbleupon-round</option> <option><i class="social-icon-stumbleupon-rectangle"></i> social-icon-stumbleupon-rectangle</option> <option><i class="social-icon-linkedin"></i> social-icon-linkedin</option> <option><i class="social-icon-linkedin-round"></i> social-icon-linkedin-round</option> <option><i class="social-icon-linkedin-rectangle"></i> social-icon-linkedin-rectangle</option> <option><i class="social-icon-lastfm"></i> social-icon-lastfm</option> <option><i class="social-icon-lastfm-rectangle"></i> social-icon-lastfm-rectangle</option>  <option><i class="social-icon-forrst"></i> social-icon-forrst</option> <option><i class="social-icon-forrst-rectangle"></i> social-icon-forrst-rectangle</option> <option><i class="social-icon-deviantart"></i> social-icon-deviantart</option> <option><i class="social-icon-deviantart-round"></i> social-icon-deviantart-round</option> <option><i class="social-icon-deviantart-rectangle"></i> social-icon-deviantart-rectangle</option> <option><i class="social-icon-youtube-full"></i> social-icon-youtube-full</option> <option><i class="social-icon-youtube"></i> social-icon-youtube</option> <option><i class="social-icon-vimeo"></i> social-icon-vimeo</option> <option><i class="social-icon-vimeo-rectangle"></i> social-icon-vimeo-rectangle</option> <option><i class="social-icon-skype"></i> social-icon-skype</option> <option><i class="social-icon-xing-rectangle"></i> social-icon-xing-rectangle</option> <option><i class="social-icon-xing-round"></i> social-icon-xing-round</option> <option><i class="social-icon-paypal"></i> social-icon-paypal</option> <option><i class="social-icon-github"></i> social-icon-github</option> <option><i class="social-icon-github-mascot"></i> social-icon-github-mascot</option> <option><i class="social-icon-github-rectangle"></i> social-icon-github-rectangle</option> <option><i class="social-icon-github-kitty"></i> social-icon-github-kitty</option> <option><i class="social-icon-tumblr"></i> social-icon-tumblr</option> <option><i class="social-icon-tumblr-rectangle"></i> social-icon-tumblr-rectangle</option> <option><i class="social-icon-yahoo"></i> social-icon-yahoo</option> <option><i class="social-icon-yahoo-rectangle"></i> social-icon-yahoo-rectangle</option>
		</select>
	<br><br></div>
	
	<div id="button-text" style=" float:left; width: 49%; margin-left:1%">
		<strong>Button Text:</strong><br>
		<input type="text" name="text" value="Button" onclick="this.select()"  />
	<br><br></div>

	<div id="button-link" style=" float:left; width: 49%; margin-left:1%">
		<strong>Link:</strong><br>
		<input type="text" name="link" value="#" onclick="this.select()"  />
	<br><br></div>
	
	<div id="demo_button" style="clear:both; padding: 1%; margin-bottom:20px">
		<a id="button-demo" class="btn" href="#" target="_blank"><i> </i>Button</a>
	</div>

	<div id="demo_code" style="clear:both; margin-bottom:20px">
		
	</div>

	<div style="padding: 1%; clear:both">
		<button id="btn_insert" class="btn btn-success">Insert shortcode</button>
	</div>
</body>
</html>